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 thing however bugs me:

I can't expand a div to take the full size calculated by the flexible box model!!!

To illustrate it I'll proved an example. In it the two flexible places take the exact with and height, but the div inside it only takes the height of the "<p>...</p>" element. For this example it doesn't matter but what I originally was trying was placing a "flexible box model" inside another "flexible box model" and this must be possible in my opinion

html, body {    font-family: Helvetica, Arial, sans-serif;    width: 100%;    height: 100%;    margin: 0px;    padding: 0px;  }    #box-1 {    background-color: #E8B15B;    }  #box-2 {    background-color: #C1D652;  }  #main {    width: 100%;    height: 100%;    overflow-x: auto;    overflow-y: hidden;  }      .flexbox {    display:-moz-box;    display:-webkit-box;    display: box;    text-align: left;    overflow: auto;  }  H1 {    width: auto;  }  #box-1 {    height: auto;    -moz-box-orient: vertical;    -webkit-box-orient: vertical;    box-orient: vertical;      -moz-box-flex: 3;    -webkit-box-flex: 3;    box-flex: 3;  }  #box-2 {    height: auto;    min-width: 50px;    -moz-box-orient: vertical;    -webkit-box-orient: vertical;    box-orient: vertical;      -moz-box-flex: 1;    -webkit-box-flex: 1;    box-flex: 1;  }  #fullsize{    background-color: red;    height: 100%;  }

<div id="main" class="flexbox">    <div id="box-1" class="flexbox">      <div id="fullsize">        <p>Hallo welt</p>      </div>      </div>    <div id="box-2" class="flexbox">       </div>  </div>

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.

Answer 2

You must also make the div you want to expand a flex-box as well and add a flex value. This fixes the problem.

#fullsize{     background-color: red;      display: -webkit-box;     display: box;     display: -moz-box;      box-flex:1;     -webkit-box-flex:1;     -moz-box-flex:1; }