1

I'm having a bit of trouble getting a div to resize to its full parent's height with flexbox. The issue only happens under Chrome (48), it renders correctly (or what I understand to be correct) in Firefox (44).

You can check it in the Fiddle: https://jsfiddle.net/jvilla/kjtLoxct/1/

The layout is something like:

...
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="page">
    <div id="inner"></div>
  </div>
  <div id="footer"></div>
</div>
...

The idea is to have a flexbox layout with a header and a footer. The "main" portion of the page, between those two, is set to have:

#wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#page {
  flex-grow: 1;
  overflow: auto;
  height: 100%;
}

And the #page div has a child div with

#inner {
     height: 100%;
}

However, the inner div overflows the parent. The parent div has the correct size if you use the inspector (total height - header - footer), but the inner div, despite the 100% height rule that should set its height to its parent's, overflows it.

I've checked several apparently similar issues but I can't seem to find a solution. I'd rather avoid using position: absolute if that's possible.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Javier Villa
  • 154
  • 1
  • 9

1 Answers1

0

To fix this simple case, it seems to be enough to make #page a flex container too: https://jsfiddle.net/jvilla/kjtLoxct/2/

However, there doesn't seem to be support for %-heights of non flex children of flex containers in Chrome. http://caniuse.com/#search=flexbox .

To fix a more complicated case, one would set #page as a flex container too, which gets the appropriate height, and then resize the inner div using #page as a reference. For example:

var p = document.getElementById('page');
var i = document.getElementById('inner5'); // Div is stacked deep into #page
i.style.height = p.clientHeight + 'px'; // 100%, calculate as needed.
Javier Villa
  • 154
  • 1
  • 9