フレックスボックス：フレックスエレメントの最小高さと高さの差は？

Question

私はflex-elementを100％の最小高さにしたいと思います。 常に下に子要素があります。 最初のflexの子のコンテンツが画面より長い場合、サイトは通常のスクロール可能になります。

Hereは私が作成したペンです。

なぜ身長ではなく、身長ではないのですか？

height: 100%; // works 
 

 
min-height: 100%; // doesn't works

Answer 1

分の高さ：当該要素またはCSSクラスの高さは、高さが最小高さの値を指定した以下であっても、指定された値未満であってはなりません。高さが何になるかは指定されていませんが、値よりも小さくすることはできません。

高さが200ピクセルの場合、最大高さは230ピクセル、最小高さは250ピクセル、ページコンポーネントの高さは250ピクセルになります。高さと最大高さの間で、max-heightは高さを上書きできます。

ラッパークラスを次のように変更すると、高さは80％のままになります。

.wrapper { 
    background-color: pink; 
    min-height: 80%; 
    height:50px; 
} 

Answer 2

としては、ここでは答え：CSS Height working but min-height doesn't work

身長が位置付け親から継承することができますが、これらは、MIN-heightプロパティを持っていないとき。 .wrapperが最小高さが設定されているので、.flexboxは、ラッパーからの高さを継承していないことを意味

。 heightを.wrapperに設定すると、.fleboxとそれには.growerが実際に何を意味するのかを知ることができ、画面に合わせて大きくなります。

注：私は、リンクされた回答の位置部分は正しくないが、引用された部分は、と言うでしょう。