html - CSS 网格在 flexbox 中不会增长

Question

我对 CSS Grid 的理解是它会增长以填充其父级，但是当父级的大小由 flexbox 控制时，这似乎无法正常工作。

在this example ，我预计浅蓝色网格元素会增长以覆盖红色区域。如果网格是独立的，则此方法可以正常工作，但是一旦将其放入 flex 元素(即使使用 flex-grow: 1)，它就根本不会增长；

这里发生了什么，有什么方法可以调整样式以符合我的预期？

---

代码:

布局

<div class="normal-grid">
  <div class="grid-item">Thing 1</div>
  <div class="grid-item">Thing 2</div>
</div>
<div class="flex">
  <div class="flex-grid">
    <div class="grid-item">Thing 1</div>
    <div class="grid-item">Thing 2</div>
  </div>
</div>

风格

.normal-grid {
  height: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
}

.flex {
  margin-top: 20px;
  height: 100px;
  display: flex;
  flex-direction: column;
}

.flex-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
}

.grid-item {
  background: lightblue;
}

Answer 1

只需保持行方向(默认方向)即可获得拉伸(stretch)效果:

.normal-grid {
  height: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
}

.flex {
  margin-top: 20px;
  height: 100px;
  display: flex;
  /*flex-direction: column;*/
}

.flex-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
}

.grid-item {
  background: lightblue;
}

<div class="normal-grid">
  <div class="grid-item">Thing 1</div>
  <div class="grid-item">Thing 2</div>
</div>
<div class="flex">
  <div class="flex-grid">
    <div class="grid-item">Thing 1</div>
    <div class="grid-item">Thing 2</div>
  </div>
</div>