min-height in einem Flex-Element wird in Chrom ignoriert

Question

Ich habe einen Flex-Container mit flex-direction: row und einige flex-Elemente. Die Flex-Gegenstände, die für sich allein stehen, hätten verschiedene Höhen, aber wegen der Vorgabe align-items: stretch füllen sie alle die Höhe der Flex-Behälter. In meinem speziellen Anwendungsfall ist das perfekt.

Das Problem ist, dass ich diese <div> s in jedem Flex-Container habe und ich brauche sie, um die volle Höhe ihrer Eltern zu nehmen. Ich dachte, ich könnte einfach min-height: 100% auf sie setzen. Diese Lösung funktioniert sowohl mit Firefox als auch mit dem Internet Explorer, nicht jedoch mit Google Chrome.

Hier ist ein Code-Snippet, das das Problem demonstriert. Wenn Sie dies auf Chrom sehen, werden Sie sehen, dass der kürzere weiße .card den violetten .card_container nicht füllt. Wenn Sie dies jedoch auf IE oder FF anzeigen, füllt es die Höhe des übergeordneten Containers.

#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>

Eine Arbeit um die ich gefunden habe ist .card_container einen Flex Behälter sowie zu machen und die .card-width: 100% ausdrücklich festgelegt.

Zum Beispiel das Snippet unten scheint in Chrome, IE und FF zu arbeiten:

#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>

Ich frage mich, warum um diese Arbeit allerdings notwendig ist. Mache ich etwas falsch oder ist das ein Fehler? Weiß jemand, ob es irgendwo dokumentiert ist?

Answer 1

Verwenden Sie keinen Platz in Flex-Elementen. in Flex-Container gesetzt

-webkit-align-items: flex-start;