CSS Grid внутри Flexbox не работает должным образом только в Chrome

Question

Я пытаюсь создать flexbox, который содержит заголовок и сетку CSS 2x2.

• 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 и заголовок, сама сетка тоже работает как положено и за пределами 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 grid.Чего мне не хватает, и как мне это исправить?(Обратите внимание, что включать заголовок в сетку сейчас нельзя).

Answer 1

Вместо flex: auto на grid, используйте 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>