altura: 100% no funciona dentro de flexbox con flex-grow

El cuadro azul debe tener una altura del 100%. Funciona cuando establezco una altura de píxel para div.a , pero lamentablemente esta no es una opción para el caso del mundo real.

Esto probablemente explica todo: http://codepen.io/anon/pen/jrVEpB

 .a{ background-color:red; display:flex; } .b1{ flex-grow:0; background-color:green; } .b2{ flex-grow:1; background-color:yellow; height:100%; } .c{ height:100%; background-color:blue; } 
 

hurr durr

hurr durr

hurr durr

hurr durr

hurr durr

hurr durr

miksi et ole full height saatana

No necesita alturas porcentuales para lograr este diseño. Se puede construir con propiedades de flex solo:

 .a { display: flex; background-color: red; } .b1 { background-color: green; } .b2 { flex: 1; display: flex; background-color: yellow; } .c { flex: 1; background-color: blue; } body { margin: 0; } 
 

hurr durr

hurr durr

hurr durr

hurr durr

hurr durr

hurr durr

miksi et ole full height saatana

Debes dar una altura del 100% al div.a, porque el div.c y su altura del 100% toman la altura de su padre. Pero cuando no hay altura, no podría funcionar con 100% … https://jsfiddle.net/h2yvoeL0/1/ enter code here

Aclamaciones.