html - 在 flex box 中使用时，网格不占据其 div 的全部高度

Question

我在 flexbox 列中有一个 grid (.genTempGrid)(反过来，它也在 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

这是由于这一行

.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>