como fazer flexboxes aninhados trabalhar

Eu tenho um pequeno exemplo de uma configuração flexbox aninhada: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>
</div>

Neste exemplo, o seguinte se aplica:

As classes CSS 'box' usam as propriedades do flexbox, nas quais apenas o boxContent é instruído a crescer. Para propriedades e valores CSS específicos, verifique o violino.'fullSize' apenas define a largura e a altura para 100%.

Quando você verifica este violino com o Firefox e o Chrome, obtém resultados diferentes. No Firefox, ele faz o que eu suponho que tem que fazer, que é esticar o conteúdo interno do .box. No Chrome, no entanto, o conteúdo interno de .box não é esticado.

Alguém poderia ter uma ideia de como estender o conteúdo no Chrome também? talvez uma propriedade específica do webkit que está faltando?

questionAnswers(3)

yourAnswerToTheQuestion