Flex子项设置width:100%的作用及宽度计算疑问

原始代码 #

CSS代码 #

.wrapper {
  display: flex;
  border: 1px solid black;
  width: fit-content;
  margin: 0 auto;
}

.item-4, .item-5 {
  border: 1px solid red;
  background: white;
}

HTML代码 #

<div class="wrapper">
  <div class="item-4">
    <h2>Item 4</h2>
    <button>Click me</button>
  </div>
  <div class="item-5">Item 5 QR code</div>
</div>

问题现象 #

初始状态下，.wrapper通过width: fit-content自适应子项内容宽度（总宽174.86px），两个子项各自适配自身内容宽度。但给.item-4添加width:100%后，它的宽度仅变为108.3px，并未充满容器。

原因与计算逻辑 #

这是flex布局结合width: fit-content时的特殊计算规则：

1. 初始宽度逻辑：.wrapper的fit-content宽度等于两个子项的固有内容宽度之和（包含各自边框、内边距），即 .wrapper宽度 = .item-4固有宽度 + .item-5固有宽度，对应数值就是 174.86px = 108.3px + 66.56px（66.56px为.item-5的固有宽度）。
2. 添加width:100%后的逻辑：当给.item-4设置width:100%，这里的百分比参考不是.wrapper的最终宽度，而是flex容器的可用空间——也就是.wrapper宽度减去其他子项（.item-5）的固有宽度。
3. 循环依赖的处理：因为.wrapper的宽度本身由子项宽度决定，浏览器会避免循环计算，直接将.item-4的width:100%解析为“占满.item-5之外的剩余空间”，而这个剩余空间刚好等于.item-4原本的固有宽度（174.86px - 66.56px = 108.3px），所以最终.item-4宽度不变，容器总宽度也和初始一致。

简单说：width: fit-content让容器宽度由子项撑起来，子项的width:100%在这里只能拿到“容器总宽减去另一个子项宽度”的空间，而这个空间刚好等于它自己原来的宽度，所以看起来没充满容器。

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