Grid rows do not stretch to full element height if parent has flex-direction column in Chrome

Question

I'm trying to display two columns with the CSS Grid stretched to the bottom of the screen. I used flexbox to achieve it:

html, body {
  height: 100%;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: #fff;
}

#wrapper {
  flex: 1;
  display: grid;
  grid:
    "title title" min-content
    "divider divider" min-content
    "part1 part2" 1fr
    / calc(50% - 5px) calc(50% - 5px);
  background-color: #003300;
  grid-gap: 10px;
}

#title {
  grid-area: title;
}

#divider {
  grid-area: divider;
}

#part1 {
  grid-area: part1;
}

#part2 {
  grid-area: part2;
}

#part1, #part2 {
  background-color: #ff0000;
}

<section id="root">
  <section id="wrapper">
    <div id="title">Title</div>
    <div id="divider"><hr></div>
    <div id="part1">Part 1</div>
    <div id="part2">Part 2</div>
  </section>
</section>

If you run this code in Firefox, you can see properly stretching red columns that reach the bottom of the screen. But in the Chrome they do not stretch properly and leave as small as possible. Is there some way to avoid this issue? I would like to save the flexbox-direction: column.

Maybe there is also a link to the chromium bug?

Answer 1

Looks like a bug in Chrome.

Flex and Grid properties don't play nice in this particular scenario.

I know you said you would like to keep flex-direction: column.

But you can get the same behavior with flex-direction: row when you add wrap to the container and make each item width: 100%.

And in this case, that switch in flex-direction solves your problem.

#root {
  display: flex;
  min-height: 100vh;
  color: #fff;
}

#wrapper {
  flex: 1;
  display: grid;
  grid:
    "title title" min-content
    "divider divider" min-content
    "part1 part2" 1fr
    / 1fr 1fr ; /* calc(50% - 5px) calc(50% - 5px) why the added complexity? */
  background-color: #003300;
  grid-gap: 10px;
}

#title   { grid-area: title; }
#divider { grid-area: divider; }
#part1   { grid-area: part1; }
#part2   { grid-area: part2; }
#part1,
#part2   { background-color: #ff0000; }
body     { margin: 0; }

<section id="root">
  <section id="wrapper">
    <div id="title">Title</div>
    <div id="divider"><hr></div>
    <div id="part1">Part 1</div>
    <div id="part2">Part 2</div>
  </section>
</section>

jsFiddle demo

More information: Force flex item to span full row width

---

If you really can't switch from flex-direction: column, here are two options you can try:

• move the min-height from #root to #wrapper (jsfiddle demo)

• make the overall parent (body, in this case) a flex container (jsfiddle demo)