在弹性框内使用时，网格未占据其div的全部高度

Question

我在列grid（又在列.genTempGrid内）中有一个flexbox（flexbox）。奇怪的是，创建的grid并未占据其div的全部高度，相反，其高度受限于其内容。

无论如何，我的理解是grid的高度==它所在的div的高度。如果我错了，请纠正我。

.d-flex-column-last-child-flex-grow-1 {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      /*height: 100%;*/
    }
    
.child-expand {
      flex-grow: 1;
    }

.genTempGrid {
            display: grid;
            height: 100%;
            grid-template-columns: 20% 60% 20%;
            grid-template-rows: 1fr;
            background-color: #f7f7f7;
        }
        
.border1 {
      border: 1px solid red;
    }

<div class="d-flex-column-last-child-flex-grow-1" style="height: 50vh">
  <div class=" d-flex-column-last-child-flex-grow-1 child-expand">
    <div class="pl-3 genTempGrid pt-2 child-expand border1">
      <div class="border1">hi</div>
      <div>hi</div>
      <div>hi</div>
    </div>
  </div>
</div>

编辑：我不是在寻找解决方法。我更想知道当前行为的原因。

Answer 1

您可以简单地设置高度：-webkit-fill-可用的CSS样式。希望这可以帮助。谢谢。

.d-flex-column-last-child-flex-grow-1 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /*height: 100%;*/
}

.child-expand {
  flex-grow: 1;
}

.genTempGrid {
  display: grid;
  height: 100%;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 1fr;
  background-color: #f7f7f7;
}

.border1 {
  border: 1px solid red;
}

.child-expand > .border1 >div {
  height: -webkit-fill-available;
  border: 2px solid green;
  margin: 1px;
}

<div class="d-flex-column-last-child-flex-grow-1" style="height: 50vh">
  <div class=" d-flex-column-last-child-flex-grow-1 child-expand">
    <div class="pl-3 genTempGrid pt-2 child-expand border1">
      <div class="border1">hi</div>
      <div>hi</div>
      <div>hi</div>
    </div>
  </div>
</div>

Answer 2

这是由于此行

.d-flex-column-last-child-flex-grow-1 {
      flex-grow: 1;
    }

有关完整说明，请参见：Why don't flex items shrink past content size?和Fitting child into parent

这可以通过使用速记flex:1或应用min-(dimension): 0来强制重新进行总体计算来解决。

.d-flex-column-last-child-flex-grow-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.child-expand {
  flex-grow: 1;
}

.genTempGrid {
  display: grid;
  height: 100%;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 1fr;
  background-color: #f7f7f7;
}

.border1 {
  border: 1px solid red;
}

<div class="d-flex-column-last-child-flex-grow-1" style="height: 50vh">
  <div class=" d-flex-column-last-child-flex-grow-1 child-expand">
    <div class="pl-3 genTempGrid pt-2 child-expand border1">
      <div class="border1">hi</div>
      <div>hi</div>
      <div>hi</div>
    </div>
  </div>
</div>