1fr single row grid 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 the available space, but its contents do not work even with align-content: stretchthe grid. In Firefox and Edge, content expands to fill the height of the grid as desired.

Here is a pen that reproduces the problem , and images of how it looks in different browsers. This is a bug with Chrome, and if so, can anyone suggest an easy 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>

Run codeHide result

Answer 1

This is a bug with Chrome, and if so, can anyone suggest an easy workaround?

Chrome. .

:

• , flex-grow: 1
• flex-grow, – flex-shrink flex-basis – .
• flex-shrink 1 .
• flex-basis auto .
• flex-basis: 0 , Chrome.

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

Hide result