Flexbox：彈性元素的最小高度與高度的差異？

Question

我想要一個flex-element，最小高度爲100％。 總是在底部有一個子元素。 如果第一個flex子項中的內容長於屏幕，則該網站應該可以正常滾動。

Here是我製造的筆。

爲什麼它與高度一起工作而不是最小高度？

height: 100%; // works 
 

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

Answer 1

最小高度：有問題的元素或CSS類的高度應不小於規定值，即使高度小於指定的最小高度的值。它沒有指定高度將會是什麼，它指定它不能小於它的值。

因此，如果高度爲200px，max-height爲230px，min-height爲250px，則頁面組件的高度爲250px。在高度和最大高度之間，最大高度可以覆蓋高度。因此，如果我將您的包裝類更改爲如下所示，它的高度將保持80％。

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

Answer 2

由於這裏回答：CSS Height working but min-height doesn't work

身高可以從定位的父母繼承，但不是在這些具有最小高度屬性。

這意味着.flexbox不會從包裝器繼承高度，因爲.wrapper已設置最小高度。當您將height設置爲.wrapper,.flebox並且.grower可以找出100％實際上意味着什麼，然後它們變得適合屏幕。

注意：我會說鏈接答案的位置部分是不正確的，但引用的部分是。