我做了一个简单的html
<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>基本上，我希望页面有两个容器，一个由左，一个由右。左边的容器有一些高度（它可能会被js改变，但我只是在这里放了一个固定的高度），父容器适合左边容器的高度，而右边的容器采用父容器的高度。
我发现对于右边的容器，如果我把高度设置为100%，它将与左边容器的高度不匹配。相反，高度将崩溃。但是如果我将height设置为auto作为示例代码，则一切正常。
为什么浏览器会有这样的行为？auto是什么意思？非常感谢！
1条答案
按热度按时间zsohkypk1#
“auto”值表示
align-items的stretch值具有效果。来自CSS Level 1 Flexbox - 9.4。十字尺寸测定-步骤11
确定每个Flex项目所用的交叉尺寸。如果flex项具有align-self：拉伸时，其计算的交叉尺寸属性为auto，并且其交叉轴边距均不为auto，则使用的外部交叉尺寸是其柔性线的使用的交叉尺寸，根据项目的使用的最小和最大交叉尺寸进行夹紧。否则，使用的交叉尺寸是项目的假设交叉尺寸。
stretch是align-items的默认值，并且在您的示例中起作用。任何其他高度值都不会导致项目的交叉尺寸拉伸。100%则是不确定高度的百分比，计算结果为0。