Nidal flexbox no expandible

Intento crear un diseño de doble columna donde la segunda columna también es una cuadrícula con dos celdas dentro de ella. Sin embargo, las dos celdas de la cuadrícula anidada no se están expandiendo para llenar su contenedor.

Cómo me gustaría: Cómo me gustaría

Como es: Como es

Cuando configuro .header-cell3and4 para tener flex: 1 lugar de display: flex daña la posición de mis imágenes dentro de la celda.

 .header-grid1 { display: flex; } .header-cell1 { flex: 0 0 66.6666%; } .header-cell2 { flex: 0 0 33.3333%; } .header-grid2 { display: flex; flex-flow: column; align-self: flex-start; text-align: center; } .header-cell3and4 { display: flex; justify-content: center; }  

Su problema fue que no le dijo a header-cell4 que crezca. Puede hacerlo con el método abreviado de flex: 1 0 auto : flex: 1 0 auto (mientras que el primer valor es flex-grow , el segundo valor es flex-shrink y el tercer valor es flex-basis ).

Si desea obtener más información sobre flexbox, le recomiendo la guía de flexbox de css-tricks .

Aquí está el código de trabajo:

CSS

 .header-grid1 { display: flex; } .header-cell1 { flex-wrap: wrap; display: flex; flex: 0 0 66.666%; } .header-cell2 { flex-wrap: wrap; flex: 0 0 33.333%; display: flex; flex-flow: column; text-align: center; } .header-cell3 { display: flex; justify-content: center; flex: 0 0 auto; } .header-cell4 { display: flex; justify-content: center; flex: 1 0 auto; } 

HTML

  

JSFiddle: http://jsfiddle.net/9gryLby6/2/

Y, por favor, la próxima vez que publiques, danos tu código CSS realmente funcional, y no cosas como .header-cell3and4 . Me llevó un tiempo reproducir tu problema.