Grid template rows no longer functioning as expected with Chrome 83

Question

In previous versions of Chrome, you could define grid-template-rows such that certain rows were fixed height and others would expand like the flex model. This no longer appears to be the case and I have provided a fiddle as an example.

The header and footer div have their height set to 100px, and their template-row value set to auto. The main div has no height defined and its template-row value is set to 1fr. The expected behavior is that the main div should fill the remaining height of 800px, but its client height is zero.

My question, with respect to the fiddle, why is the main div not expanding to fill the remaining height of the grid div?

.container {
  display: flex;
  min-height: 1000px;
  flex-direction: column;
}

.grid {
  display: grid;
  flex: 1;
  grid-template-areas: 
     "header" 
      "main"
     "footer";
  grid-template-rows: auto 1fr auto;
  justify-items: stretch;
  align-items: stretch;
}

.header {
  grid-area: header;
  background-color: red;
  height: 100px;
}

.main {
  grid-area: main;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: blue;
  height: 100px;
}

<div class="container">
  <div class="grid">
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </div>
</div>

https://jsfiddle.net/kqxLd6tm/2/

not related to the grid but flexbox, the flex:1 is not doing its job .. adding height: 0; to the grid fixes the issue (don't know why) — Temani Afif, Jul 21 '20 at 15:50

Michael Benjamin · Answer 1 · 2020-07-21T22:15:34.293

This looks like yet another bug with flex-direction: column (details) and/or nested flex containers (details).

In your code, flex: 1 is apparently being ignored. Or maybe it's being factored into the layout after other box sizes have been computed, so it's having no effect.

In any case, you can resolve the problem by using a row instead of a column direction container.

Since a container with flex-direction: row automatically sets align-self: stretch to the children, you no longer need flex: 1 for the height. But you still need it for the width.

In short, you only need to make one change to your code: remove flex-direction: column.

.container {
  display: flex;
  min-height: 1000px;
  /* flex-direction: column; */
}

.grid {
  display: grid;
  flex: 1;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
  background-color: red;
  height: 100px;
}

.main {
  grid-area: main;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: blue;
  height: 100px;
}

<div class="container">
    <div class="grid">
      <div class="header"></div>
      <div class="main"></div>
      <div class="footer"></div>
    </div>
</div>

Grid template rows no longer functioning as expected with Chrome 83

1 Answers1