「min-height」パーセンテージは、要素に「display: flex」の間接的な親がある場合にのみ適用されます。

Question

#main が display:flex ルールを取得した場合にのみ #inner 要素の高さが決まる理由が理解できません。

これは私のコードです: リーリー リーリー

display: flex を削除すると、ルール #inner の高さは 0:

になります。

リーリー リーリー

＃＃＃後もう一つ。

#inner 内にコンテンツがある場合、その高さは #main の高さに累積されます。

スクリーンショットを見てください

Answer 1

フレックスボックスに関連する stretch 配置の結果に直面しています。デフォルトでは、フレックス項目は引き伸ばされるため、次のことが適用されます:

つまり、パーセンテージを指定した min-height が機能します。整列を変更して display:flex

を維持すると機能しません

リーリー リーリー