fit-content容器下height:auto与height:100%表现差异及原因

先看你给出的代码：

<div style="height: fit-content; display: flex">
    <div style="width: 500px; height: 500px; border: black solid 2px"></div>
    <div style="height: auto; width: 500px; border: red solid 2px"></div>
</div>

为什么设置height:100%会高度塌陷？ #

浏览器计算百分比高度的核心逻辑是：子元素的height:100%必须依赖父元素有明确的、不依赖子元素计算的高度值。你这里的父容器用了height: fit-content，它的高度完全由左侧固定500px的子元素撑起来——父容器本身没有独立的高度设定，高度是跟着子元素动态计算的。这种情况下，浏览器在计算右侧子元素的height:100%时，无法提前确定父容器的最终高度，导致百分比高度规则失效，右侧容器因为没有内容直接塌陷成0高度。

这里height:auto的含义是什么？ #

在Flex布局的直接子元素（flex项目）中，height:auto是默认值，但它不是简单的“由内容撑开高度”，而是会遵循Flex布局的默认对齐规则：

• Flex容器默认的交叉轴对齐方式是align-items: stretch，当子元素设置height:auto时，会自动拉伸以填满Flex容器在交叉轴方向的可用高度。
• 由于父容器的高度已经被左侧子元素固定为500px，右侧子元素会被自动拉伸到与父容器一致的高度，也就是和左侧容器同高，这就是它表现正常的原因。

内容的提问来源于stack exchange，提问作者Xingce Bao