html - Flexbox 中的 CSS Grid 仅在 Chrome 上无法按预期工作

Question

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

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

这是我现在拥有的:

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 和标题时，网格本身也可以在 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 网格的组合上。我错过了什么，我该如何解决？ (请注意，现在不能在网格中包含标题。)

Answer 1

不要在 grid 上使用 flex: auto，而是在其上使用 flex: 1 以便在网格中获得所需的行为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>