Chrome 中高度为 1fr 的单行网格未填充高度答案

【问题标题】：Single-row grid with height 1fr not filling height in ChromeChrome 中高度为 1fr 的单行网格未填充高度
【发布时间】：2018-07-05 08:08:40
【问题描述】：

我在 Flexbox 列中有一个 CSS Grid，并且该网格有 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>

【问题讨论】：

不要使用 height 来修复 Flexbox 问题，尽可能使用它自己的属性之一，如 Michael 所建议的那样，否则，当/如果 Chrome 解决了该错误/行为，您的解决方案可能会突然中断。

标签： css google-chrome flexbox css-grid

【解决方案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

#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; }

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

【讨论】：