為什麼我的子元素會溢出其父元素，儘管兩者都有「最大高度：100%」？

儘管最大高度為100%，子元素仍溢出父元素

考慮這樣一種情況：容器內有一個最大高度為100% 的子元素，並且該子元素也使用最大高度。出乎意料的是，子元素最終溢出了父元素。

理解行為

問題源於以下事實：當您定義max-height 的百分比時孩子，它指的是父母實際高度的百分比，而不是其最大高度。因此，當父元素沒有明確設定高度時，子元素的最大高度計算就沒有定義的基本高度。因此， max-height 預設為“none”，允許子元素無限增長。

在這種情況下，子元素的唯一限制是其父元素的 max-width。由於影像的高度大於寬度，因此它會向下溢出容器的高度，以保持其縱橫比，同時最大化其整體尺寸。

解決方案：明確高度

要解決此問題，您只需為父元素提供明確的高度即可。透過這樣做，您可以為子元素的最大高度計算建立一個明確的基礎高度。因此，子元素將被限制為父元素的高度，同時仍保持其縱橫比。

因此，為父元素指定明確高度可確保子元素遵守其最大高度限制，從而防止它不會溢出容器。

以上是為什麼我的子元素會溢出其父元素，儘管兩者都有「最大高度：100%」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！