how to make nested flexboxes work

how to make nested flexboxes work

I have a small example of a nested flexbox setup:
http://jsfiddle.net/ThomasSpiessens/MUrPj/12/
<div class="box fullSize">
<div class="boxHeader">HEADER</div>
<div class="boxContent">
<div class="box fullSize">
<div class="boxHeader moregreen">INNER HEADER</div>
<div class="boxContent red">
CONTENT CONTENT CONTENT
</div>
<div class="boxFooter moreblue">INNER FOOTER</div>
</div>
</div>
<div class="boxFooter">FOOTER</div>
In this example the following applies:
CSS 'box' classes use flexbox properties on which only the boxContent is
told to grow. For specific CSS properties and values, please check the
fiddle.
'fullSize' just sets both width and height to 100%.
When you check this fiddle with Firefox and Chrome you get different
results. In Firefox it does what I would suppose it has to do, which is
stretching the inner .boxContent. In Chrome however, the inner .boxContent
doesn't get stretched.
Would anyone have an idea how to make the content stretch in Chrome as
well ? perhaps a specific webkit property that is missing ?
Thanks, Thomas.