HTML5 flexible box model height calculation

Question

after researching the flexible box model for a whole day, I must say I really like it. It implements the functionality I implement in JavaScript in a fast and clean way. One

Answer 1

I've been wrestling with this myself, but have finally managed to come up with a solution.

See this jsFiddle, although I have only added webkit prefixes so open in Chrome.

You basically have 2 issues which I will deal with separately.

1. Getting the child of a flex-item to fill height 100%
   • Set position:relative; on the parent of the child.
   • Set position:absolute; on the child.
   • You can then set width/height as required (100% in my sample).
2. Fixing the resize scrolling "quirk" in Chrome
   • Put overflow-y:auto; on the scrollable div.
   • The scrollable div must have an explicit height specified. My sample already has height 100% but if none is already applied you can specify height:0;

See this answer for more information on the scrolling issue.