min-height all'interno di un articolo flessibile viene ignorato in chrome

Question

Ho un contenitore flessibile con flex-direction: row e alcuni elementi flessibili. Gli elementi flessibili, da soli avrebbero varie altezze, ma a causa del default align-items: stretch, tutti riempiono l'altezza dei contenitori flessibili. Nel mio caso d'uso specifico, questo è perfetto.

Il problema è che ho questi <div> s all'interno di ciascun contenitore flessibile e ho bisogno che occupino l'intera altezza del genitore. Ho pensato che potrei semplicemente impostare min-height: 100% su di loro. Questa soluzione funziona sia su Firefox che su Internet Explorer, ma non su Google Chrome per qualche motivo.

Ecco uno snippet di codice che illustra il problema. Se lo visualizzi su Chrome, vedrai che il bianco più corto .card non sta riempiendo il viola .card_container. tuttavia, se lo visualizzi su IE o FF, riempirà l'altezza del contenitore genitore.

#grid { 
 
    background: rgba(255,0,0,0.2); 
 
    padding: 10px; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex;  
 
} 
 

 
.card_container { 
 
    width: 300px; 
 
    background: rgba(0,0,255,0.2); 
 
    margin: 15px; 
 
    padding: 5px; 
 
} 
 

 

 
.card { 
 
    background: white; 
 
    min-height: 100%; /* <- Why isn't this working? */ 
 
}

<div id="grid"> 
 
    <div class="card_container"> 
 
    <div class="card"> 
 
     This text is very short. 
 
    </div> 
 
    </div> 
 
    <div class="card_container"> 
 
    <div class="card"> 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
    </div> 
 
    </div> 
 
</div>

Un lavoro intorno che ho trovato è quello di rendere .card_container un contenitore flessibile come bene e per impostare in modo esplicito il .card-width: 100%.

Ad esempio, il frammento di seguito sembra funzionare in Chrome, FF e IE:

#grid { 
 
    background: rgba(255,0,0,0.2); 
 
    padding: 10px; 
 

 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
} 
 

 
.card_container { 
 
    width: 300px; 
 
    background: rgba(0,0,255,0.2); 
 
    margin: 15px; 
 
    padding: 5px; 
 
    
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 

 
.card { 
 
    width: 100%; 
 
    background: white; 
 
}

<div id="grid"> 
 
    <div class="card_container"> 
 
    <div class="card"> 
 
     This text is very short. 
 
    </div> 
 
    </div> 
 
    <div class="card_container"> 
 
    <div class="card"> 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
     This text is very long. 
 
    </div> 
 
    </div> 
 
</div>

mi chiedo il motivo per cui questa soluzione è necessario però. Sto facendo qualcosa di sbagliato o si tratta di un bug? Qualcuno sa se è documentato da qualche parte?

Answer 1

non utilizzare lo spazio negli articoli flessibili. set in contenitore flessibile

-webkit-align-items: flex-start;