cómo hacer que funcionen los flexboxes anidados

Tengo un pequeño ejemplo de una configuración flexbox anidada: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>

En este ejemplo se aplica lo siguiente:

Las clases 'box' de CSS usan propiedades de flexbox en las que solo se le dice a boxContent que crezca. Para propiedades y valores de CSS específicos, verifique el violín.'Tamaño completo' solo establece el ancho y el alto en 100%.

Cuando verificas este problema con Firefox y Chrome, obtienes diferentes resultados. En Firefox hace lo que yo supongo que tiene que hacer, que es estirar el contenido interno de .box. En Chrome, sin embargo, el .boxContent interno no se estira.

¿Alguien tendría una idea de cómo hacer que el contenido se extienda también en Chrome? ¿Tal vez una propiedad específica de webkit que falta?

Respuestas a la pregunta(3)

Su respuesta a la pregunta