フレックスアイテム内の最小高さがクロムで無視されています

Question

フレックスコンテナのflex-direction: rowとフレキシブルアイテムがあります。フレックスアイテムは、さまざまな高さを持ちますが、デフォルトのalign-items: stretchのため、すべてフレックスコンテナの高さを満たします。私の特定のユースケースでは、これは完璧です。

問題は、フレックスコンテナの内側にこれらの<div>があり、それらが親の高さ全体を占有する必要があることです。私はちょうど彼らの上にmin-height: 100%を設定できると思った。このソリューションは、FirefoxとInternet Explorerの両方で動作しますが、何らかの理由でGoogle Chromeで動作しません。

問題を示すコードスニペットを示します。これをクロムで見ると、より短い白い.cardが紫色の.card_containerを埋めていないことがわかります。ただし、IEまたはFFでこれを表示すると、親コンテナの高さがいっぱいになります。私の周りの

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

一つの仕事が見つけた.card_containerフレックスコンテナだけでなく作るために、明示的width: 100%に.cardを設定することです。例えば

、以下のスニペットは、クロム、FFと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>

この作品は周りけれども必要な理由私は思ったんだけど。私は何か間違っているのですか？これはバグですか？それはどこに文書化されている場合誰も知っていますか？

Answer 1

フレックスアイテムにスペースを使用しないでください。フレックスコンテナに が設定されています

-webkit-align-items: flex-start;