Flexbox 中的 CSS Grid 仅在 Chrome 上无法正常工作答案

【问题标题】：CSS Grid inside Flexbox not working as expected only on ChromeFlexbox 中的 CSS Grid 仅在 Chrome 上无法正常工作
【发布时间】：2019-03-09 19:06:31
【问题描述】：

我正在尝试创建一个包含标题和 2x2 CSS 网格的 flexbox。

flexbox (.container) 填充整个视口。
标题的高度是可变的。它可能会在页面打开时动态变化。
网格中的四个单元格必须占据视口的剩余部分，并且它们的宽度和高度必须相等。

这是我现在拥有的：

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

* { box-sizing: border-box; }

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

.header {
  background: lime;
}

.grid {
  flex: auto; /* fills the remaining part of the viewport below header */
  background: cyan;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 2px;
}

.cell {
  padding: 10px;
  background: linear-gradient(to bottom right, orange, white);
}

<div class="container">
  <div class="header">Variable Height<br />Header</div>
  <div class="grid">
    <div class="cell a">Cell A</div>
    <div class="cell b">Cell B</div>
    <div class="cell c">Cell C</div>
    <div class="cell d">Cell D</div>
  </div>
</div>

这在 Firefox 上可以正常工作，但在 Chrome 上却不行。这是所需的行为：

这是 Chrome 上的不良行为：

令人困惑的部分是我的div.grid（青色）具有所需的高度（100vh 减去标题高度），因此 flexbox 本身可以正常工作。当我删除 flexbox 和 header 时，网格本身也在 flexbox 之外按预期工作。

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

* { box-sizing: border-box; }

.container {
  height: 100%;
  background-color: pink;
  border: 2px solid red;
}

.grid {
  height: 100%;
  background: cyan;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
}

.cell {
  padding: 10px;
  background: linear-gradient(to bottom right, orange, white);
}

<div class="container">
  <div class="grid">
    <div class="cell a">Cell A</div>
    <div class="cell b">Cell B</div>
    <div class="cell c">Cell C</div>
    <div class="cell d">Cell D</div>
  </div>
</div>

所以在我看来，问题只发生在 Chrome、flexbox 和 css 网格的组合中。我错过了什么，我该如何解决这个问题？（请注意，现在不能在网格中包含标题。）

【问题讨论】：

这似乎是一个已知的 Chrome 错误：bugs.chromium.org/p/chromium/issues/detail?id=784059。 @kukkuz 的建议是已知的解决方法。

标签： html css flexbox css-grid

【解决方案1】：

在grid 上使用flex: 1 而不是flex: auto，以便网格，并且您在Firefox 和Chrome 中都具有所需的行为。请参阅下面的演示：

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

* { box-sizing: border-box; }

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

.header {
  background: lime;
}

.grid {
  flex: 1; /* fills the remaining part of the viewport below header */
  background: cyan;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 2px;
}

.cell {
  padding: 10px;
  background: linear-gradient(to bottom right, orange, white);
}

<div class="container">
  <div class="header">Variable Height<br />Header</div>
  <div class="grid">
    <div class="cell a">Cell A</div>
    <div class="cell b">Cell B</div>
    <div class="cell c">Cell C</div>
    <div class="cell d">Cell D</div>
  </div>
</div>

【讨论】：

这种解决方法在 chrome 83 中不再适用，边缘很好，我很生气。
你必须添加“height: 100vh; min-height: 0;”到“.grid”

【解决方案2】：

<style>
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
    }

    * { box-sizing: border-box; }

    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      border: 2px solid red;
    }

    .header {
      background: lime;
    }

    .grid {
      flex: 1; /* fills the remaining part of the viewport below header */
      background: cyan;
      display: grid;

      grid-template-columns:1fr 1fr;
   
      grid-gap: 2px;
    }

    .cell {
      padding: 10px;
      background: linear-gradient(to bottom right, orange, white);
    }
</style>
    </head>
    </body>

<html>
    </head>
<!-- begin snippet: js hide: false console: true babel: null -->

【讨论】：

你能在代码sn-p之外给出一些解释吗？