flexbox 4タイルレイアウト

Question

4つの等しいタイルでフレックスボックスベースの2x2レイアウトを作成します。ここにはフィドルhttps://jsfiddle.net/1Lw5hge3/2/があります。 初期の1x2水平分割は、私は私の知る限り理解し、ちょうど50％に設定し、拡大または縮小していない」に等しい、

.half 
{ 
    flex: 0 0 50%; 
} 

を設定し、うまく働きました。タイルの1つにコンテンツがない場合でも、正常に動作します。

しかし、ネストされたquarterタイルの同じアプローチを試したところ、動作しませんでした。各タイルの内容は異なります。背景画像でも可変の高さのテキストでもかまいません。 flex-growが0に設定されている場合、タイルはコンテンツの高さだけで完全な高さには拡張されません。 1に設定すると拡大されますが、割合は50％ではありません。コンテンツに基づいています（小さな見積もりや画像のタイルなど、画像タイルには初期高さがないため、見積もりの​​タイルが高くなります）。

コンテンツに関係なく、quarterタイルの高さを正しく設定する方法はありますか？ halfがどういう仕組みであるのかわからないのですが、containerから何かが修正されていますか？

Answer 1

0ではなく50％にフレックス基礎を設定し、1にフレックス成長が問題に

.quarter 
{ 
    flex: 1 0 0; 
}