单排网格，高度为1fr，未在Chrome中填充高度

Question

我在Flexbox列中有一个CSS网格，网格有flex-grow: 1。

在Chrome中，网格会展开以填充可用空间，但其内容不会，即使网格上有align-content: stretch也是如此。在Firefox和Edge中，内容会根据需要扩展以填充网格的高度。

Here's a pen that reproduces the problem，以及它在不同浏览器中的外观图像。这是Chrome的错误，如果是这样，任何人都可以建议一个简单的解决方法吗？

铬

火狐

边

#wrapper {
  display: flex;
  flex-direction: column;
  height: 15rem;
  background-color: #aaa;
}

#grid {
  flex-grow: 1;
  display: grid;
  background-color: #ccf;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-content: stretch; /* "end" correctly puts the row to the bottom */
}

#left {
  background-color: #fcc;
}

#right {
  background-color: #cfc;
}

<div id="wrapper">
  <div id="top">not in grid</div>

  <div id="grid">
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>

Answer 1

  

这是否是Chrome的错误，如果是这样，有人可以建议一个简单的解决方法吗？

它看起来像是Chrome中的一个错误。但我无法肯定地说。

这里发生了什么：

• 您已将弹性项目网格容器设置为使用flex-grow: 1
消耗所有可用高度
• 由于您只定义了flex-grow属性，因此其他两个flexibility properties - flex-shrink和flex-basis保持默认值。
• flex-shrink的默认值为1，与此问题无关。
• flex-basis的默认值为auto，，是问题的根源。
• 如果您在代码中添加flex-basis: 0，则该项目也会在Chrome中占据全部空间。

revised codepen

＆＃13;

＆＃13;

#wrapper {
  display: flex;
  flex-direction: column;
  height: 15rem;
  background-color: #aaa;
}

#grid {
  /* flex-grow: 1; */
  flex: 1; /* fg:1, fs:1, fb:0 */
  display: grid;
  background-color: #ccf;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

#left  { background-color: #fcc; }
#right { background-color: #cfc; }

＆＃13;

<div id="wrapper">
  <div id="top">not in grid</div>
  <div id="grid">
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;