为何此场景下flex-basis: auto未解析为内容尺寸？

云上老周

2026-6-26

问题解析：flex容器下子元素宽度不符合预期的原因

代码片段

CSS代码

.container {
  height: 100px;
  width: 100px;
  border: 1px solid green;
  display: flex;  
}

.item {
  height: 100px;
  border: 1px solid red;
  flex: 1 0 auto;
  display: flex;
}

.item-child {
  height: 100px;
  border: 1px solid blue;
  flex: 1 0 100px;
}

HTML代码

<div class="container">
   <div class="item">
     <div class="item-child"></div>
   </div>
   <div class="item">
     <div class="item-child"></div>
  </div>
</div>

问题

在此代码片段中，.item-child的宽度按其flex-basis属性设置计算为100px。但设置了flex: 1 0 auto（即flex-basis: auto、flex-shrink: 0）的.item元素，每个宽度却为50px。按规则flex-basis: auto应参考内容尺寸，flex-shrink: 0会阻止收缩，为何.item未呈现100px宽度？

原因解析

核心问题出在**flex-basis: auto的计算逻辑和父容器的约束**上：

当.item设置flex-basis: auto时，它的基准尺寸本应参考内容宽度，但.item本身是flex容器，内部的.item-child设置了flex: 1 0 100px——这里的flex:1意味着子元素会填充父容器（.item）的可用空间，而非固定保持100px。
父容器.container宽度固定为100px，且是flex容器，.item设置了flex:1（即flex-grow:1），所以两个.item会平分.container的100px宽度，各占50px。此时.item的宽度被父容器的flex分配规则限制为50px，里面的.item-child虽然flex-basis是100px且flex-shrink:0不会收缩，只会溢出.item容器，但不会反向撑大.item的宽度。
本质是混淆了flex容器的尺寸传递逻辑：.item-child的尺寸不会主动传递给作为flex容器的.item，.item的宽度优先由自身的flex属性和父容器的空间约束决定，内部子元素的溢出不会改变这个结果（除非给.item设置min-width: max-content这类规则）。