html - 在弹性盒内使用时，网格没有占据其 div 的全部高度

Question

我在一列中有一个grid( .genTempGrid) flexbox（反过来，它也在 column 内flexbox）。奇怪的是，createdgrid并没有占据其 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>

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

标签： htmlcssflexboxcss-grid

Answer 1

这是由于这条线

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

有关完整说明，请参阅：为什么 flex 项目不缩小超过内容大小？和让孩子适应父母

这可以通过使用简写flex:1代替或应用min-(dimension): 0强制重新计算的 a 来解决。

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