为什么我的子元素会溢出其父元素，尽管两者都有'最大高度：100%”？

尽管最大高度为 100%，子元素仍溢出父元素

考虑这样一种情况：容器内有一个最大高度为 100% 的子元素，并且该子元素也使用最大高度。出乎意料的是，子元素最终溢出了父元素。

理解行为

问题源于以下事实：当您定义 max-height 的百分比时孩子，它指的是父母实际高度的百分比，而不是其最大高度。因此，当父元素没有明确设置高度时，子元素的最大高度计算就没有定义的基本高度。因此， max-height 默认为“none”，允许子元素无限增长。

在这种情况下，对子元素的唯一限制是其父元素的 max-width。由于图像的高度大于宽度，因此它会向下溢出容器的高度，以保持其纵横比，同时最大化其整体尺寸。

解决方案：显式高度

要解决此问题，您只需为父元素提供明确的高度即可。通过这样做，您可以为子元素的最大高度计算建立一个明确的基础高度。因此，子元素将被限制为父元素的高度，同时仍保持其纵横比。

因此，为父元素指定显式高度可确保子元素遵守其最大高度限制，从而防止它不会溢出容器。

以上是为什么我的子元素会溢出其父元素，尽管两者都有'最大高度：100%”？的详细内容。更多信息请关注PHP中文网其他相关文章！