Single-row grid with height 1fr not filling height in Chrome

Question

I have a CSS Grid inside a Flexbox column, and the grid has flex-grow: 1.

In Chrome, the grid expands to fill available space, but its content does not, even with align-content: stretch on the grid. In Firefox and Edge, the content expands to fill the grid's height, as desired.

Here's a pen that reproduces the problem, and images of how it looks in different browsers. Is this a bug with Chrome, and if so, can anyone suggest a straightforward workaround?

Chrome

Firefox

Edge

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

Answer 1

Is this a bug with Chrome, and if so, can anyone suggest a straightforward workaround?

It looks like a bug in Chrome. But I can't say for sure.

Here's what's happening:

• You have the flex item grid container set to consume all available height with flex-grow: 1
• Because you've only defined the flex-grow property, the other two flexibility properties – flex-shrink and flex-basis – remain at their default values.
• The default value of flex-shrink is 1, and is not pertinent to this problem.
• The default value of flex-basis is auto, and is the source of the problem.
• If you add flex-basis: 0 to your code, the item takes full height in Chrome, as well.

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>