為什麼具有 `max-height: 100%` 的子元素會溢出其具有 `max-height` 的父元素，但不會使用明確高度？

溢出子元素，最大高度：100%

此查詢檢查意外行為：最大高度設定為100 的子元素% 溢出其父容器，儘管父容器也使用max-height。但是，當為父級分配明確的高度時，可以防止這種溢出。

理解問題

通常，當 max-height 被指定為子級的百分比時元素，它代表父元素實際高度的百分比。但是，如果父級沒有明確的高度，子級的最大高度將變得不確定，從而使其超過父級的最大高度。

對溢位的影響

在這個特定場景中，父級的 max-height: 200px，而子級的 max-height: 100%。當沒有為父級提供明確高度時，其實際高度保持未定義。結果，孩子的最大高度計算為零，允許其無限增長。由於子級的內容（高度大於其寬度的圖像）無法容納在父級的最大寬度內，因此它會向下溢出。

解：顯式父級高度

為了防止這種溢出，必須為父元素指定明確的高度（例如，200px）。這為子級的最大高度計算建立了明確的參考點，確保其不會超過父級的實際高度並保持在其最大高度約束內。

以上是為什麼具有 `max-height: 100%` 的子元素會溢出其具有 `max-height` 的父元素，但不會使用明確高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！