John John - 3 months ago 5
CSS Question

100% height when parent is flex item: Chrome bug?

Let's say we have this markup:

<div id="outer">
<div id="middle">
<div id="inner">
</div>
</div>
</div>


and this css:

#outer {
display: flex;
flex-direction: column;
background-color: white;
height: 300px;
}

#middle {
flex-grow: 1;
background-color: beige;
}

#inner {
background-color: black;
height: 100%;
}


I would expect the inner div to span the whole 300 pixel, as it should be as high as the middle flex item which in turn fills its parent.

That's the behavior I see on IE, Edge and Firefox.

On Chrome, the middle div still fills the 300 pixel, but the inner div is as high as it would be without any height attribute.

See this fiddle: https://jsfiddle.net/mhjussna/

That's a bug in Chrome, right?

Answer

It's because you are just using flex-grow:1 on the #middle div.

If you use the recommended shorthand of flex:1...it works perfectly.

#outer {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 300px;
}
#middle {
  flex: 1;
  /* here */
  background-color: beige;
}
#inner {
  background-color: black;
  height: 100%;
  color: white;
}
<div id="outer">
  <div id="middle">
    <div id="inner">
      x
    </div>
  </div>
</div>

Alternatively, state all the flex values

#middle {
  flex-grow: 1;
  flex-shrink:0;
  flex-basis:0;
  background-color: beige;
}

JSfiddle Demo

Comments