修改CSS flex-direction为何会改变flex容器默认宽度？

问题描述 #

当将.flex-group的flex-direction设置为row时，其默认宽度为0；设置为column时，默认宽度大于0（元素无内容却可见）。想了解该行为产生的原因、对应的名称，是否属于CSS bug，以及该行为是否符合CSS规范？

示例代码 #

CSS代码 #

.flex-group {
  right: 0px;
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 40%;
}

.any-container {
  margin: 50px;
  background-color: black;
  height: 50%;
  width: 20%;
}

.any-container2 {
  margin: 50px;
  background-color: black;
  height: 50%;
  width: 20%;
  transform: translateX(40%);
}

HTML代码 #

<div class="flex-group">
  <div class="any-container"></div>
  <div class="any-container2"></div>
</div>

解答 #

1. 行为产生的原因 #

• flex-direction: column 时：Flex容器的主轴线为垂直方向，交叉轴线为水平方向。对于绝对定位的Flex容器，交叉轴（宽度）的默认尺寸为auto，会根据子元素在交叉轴上的整体需求（包括子元素的width、margin等）自动撑开。你的子元素设置了width:20%（相对于初始包含块即视口），再加上margin:50px，容器的宽度会被这些子元素的水平占用空间撑大，因此呈现出大于0的宽度。
• flex-direction: row 时：Flex容器的主轴线为水平方向，此时容器的主轴（宽度）默认需要由子元素的尺寸决定，但子元素的width:20%是相对于Flex容器的宽度，形成了循环依赖（容器宽度依赖子元素，子元素宽度又依赖容器）。根据浏览器的尺寸计算规则，这种情况下会将容器的宽度计算为0，子元素的宽度也随之变为0，最终容器宽度显示为0。

2. 对应的概念名称 #

这种行为属于Flex布局中的交叉轴自动尺寸计算（cross-axis sizing）和主轴尺寸循环依赖处理，结合了绝对定位元素的尺寸计算逻辑。

3. 是否为CSS bug？是否符合规范？ #

这不是CSS bug，完全符合CSS Flexbox和绝对定位的规范：

• Flexbox规范定义，Flex容器的交叉轴尺寸默认取auto，会自适应子元素在交叉轴上的空间需求；
• 对于存在尺寸循环依赖的情况（如子元素百分比尺寸依赖父容器，父容器尺寸又依赖子元素），CSS规范明确了浏览器的处理逻辑，即优先将父容器的不确定尺寸设为0，再进行后续计算。

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