CSS Grid 在 flexbox 内时不会增长

Posted 2023-03-06

【中文标题】CSS Grid 在 flexbox 内时不会增长

【英文标题】：CSS Grid does not grow when inside flexbox

【发布时间】：2019-01-29 04:21:19

【问题描述】：

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

在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;

【参考方案1】：

您可以将flex-basis: 100%; 添加到.flex-grid 以获得您想要的行为。

.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;
  flex-basis: 100%;


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

当元素由 flexbox 控制时，必须考虑它们的初始尺寸。在这种情况下，.flex-grid 似乎在缩小 - 所以添加 flex-basis: 100% 将告诉浏览器它的初始大小应该是其大小的 100%。

【讨论】：

另外，在这种情况下，将height: 0;添加到.flex-grid具有相同的效果

【参考方案2】：

只要保持row方向（默认方向）就可以得到拉伸效果：

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

【讨论】：

这行得通，但知道为什么吗？这似乎是一个错误。

@SephReed 是的，可能是一个已修复的错误，因为该问题不再实际发生