當父元素具有「max-height」時，為什麼子元素會溢出「max-height: 100%」？

最大高度的意外溢位問題：100%

在給定的範例中，最大高度為100% 的子元素以指定的最大高度溢出父容器。在這種情況下，這種看似意外的行為引發了人們對 max-height 性質的疑問。

問題的癥結在於子元素的 max-height 的計算。當 max-height 設定為百分比時，它被解釋為父級實際高度的百分比，而不是其 max-height。如果沒有為父級指定明確的高度，則父級的實際高度未定義，因此子級的最大高度預設為無。

由於沒有對子級強制執行最大高度，因此可以自由充分發揮其內容。對於影像，其垂直長寬比通常大於其水平長寬比，影像會向下溢出容器的高度，同時保持其固有的長寬比。

這種意外行為的解決方案是明確地定義父元素的高度。透過這樣做，為孩子的最大身高計算建立了一個固定的身高參考點。這可確保子項保持在指定的高度限制內，同時仍保持其縱橫比，防止溢出。

以上是當父元素具有「max-height」時，為什麼子元素會溢出「max-height: 100%」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！