Uso de valores porcentuales para completar los elementos de la caja flexible

Question

Uso las cajas flexibles en Google Chrome (solo este navegador debe ser compatible) para crear una disposición dinámica. Tengo n elementos infantiles en un elemento div que debe compartir todo el espacio con la misma proporción. Esto está funcionando sin problemas debido a los nuevos flex-boxes introducidos. Pero también tuve que establecer la altura de cada div interno en 0. Si deseo estirar un elemento dentro de este div al 100% de altura, usa el valor dado de 0 en lugar de cualquier valor calculado. Como he elegido flex-boxes para evitar el uso de Javascript, preferiría seguir así. ¿Hay alguna otra manera de hacer que la altura de la imagen llene el div?

Y aquí está el código (sólo probado en Google Chrome):

html

<div class="flexbox"> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
</div> 

css

  .flexbox { 
       display:-webkit-box; 
       -webkit-box-orient:vertical; 
       height:300px; 
       width:200px; 
      } 
      .flexbox > div { 
       -webkit-box-flex:1; 
       height:0; 
       border:solid 1px #000000; 
      } 
      .flexbox > div > img { 
       height:100%; 
      } 

The code to watch in the browser

Answer 1

Bueno, yo tengo trabajo después de las horas de investigación. los siguientes cambios que hacer:

.flexbox { 
      display:-webkit-box; 
      -webkit-box-orient:vertical; 
      height:300px; 
      width:200px; 
     } 
     .flexbox > div { 
      -webkit-box-flex:1; 
      height:0; 
      border:solid 1px #000000; 
      position:relative; /* CHANGE */ 
     } 
     .flexbox > div > img { 
      height:100%; 
      position:absolute; /* CHANGE */ 
     } 

Si usted está interesado en ti puede hacer estos cambios a través de los ChromeDevTools a la EAP y verá el resultado correcto!