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?