Utilizzo dei valori percentuali per riempire gli articoli della Flexbox

Question

Uso le Flexbox in Google Chrome (solo questo browser deve essere supportato) per creare un layout dinamico. Ho n elementi figlio in un elemento div che dovrebbe condividere l'intero spazio con lo stesso rapporto. Questo funziona senza problemi a causa delle nuove scatole flessibili introdotte. Ma ho anche dovuto impostare l'altezza di ogni div interno a 0. Se voglio estendere un elemento all'interno di questo div all'altezza 100%, usa il valore dato di 0 invece di qualsiasi valore calcolato. Siccome ho scelto i flex-box per evitare l'uso di javascript, preferirei rimanere così. C'è un altro modo per rendere l'altezza dell'immagine riempiendo il div?

E qui è il codice (testato solo in 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

Beh ho capito di lavoro dopo ore di ricerca. Le seguenti modifiche sono da fare:

.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 */ 
     } 

Se siete intrested in voi può fare questi cambiamenti attraverso i ChromeDevTools al CSS e vedrete il risultato giusto!