width: 100%在Flex子项中并非简单“占满父容器”，而是作为初始主轴尺寸参与弹性布局计算；其最终宽度由flex-basis、flex-grow、flex-shrink及兄弟元素共同决定，常因默认flex-shrink: 1触发收缩，导致结果远小于预期。
`width: 100%`在flex子项中并非简单“占满父容器”，而是作为初始主轴尺寸参与弹性布局计算；其最终宽度由`flex-basis`、`flex-grow`、`flex-shrink`及兄弟元素共同决定，常因默认`flex-shrink: 1`触发收缩，导致结果远小于预期。
在Flex布局中，为子项（flex item）设置 width: 100% 是一个极易引发误解的操作——它不会强制该子项独占整行或撑满父容器宽度，而只是将其主轴初始尺寸（main-axis base size）设为父容器内容区宽度的100%。但这一值会立即被Flex引擎纳入弹性计算流程，并受flex-shrink（默认为1）和兄弟元素竞争影响，最终呈现的宽度往往是“被压缩后的结果”。
以你提供的示例为例：
.wrapper {
display: flex;
width: fit-content; /* 关键！父容器宽度由子项内容总和决定 */
margin: 0 auto;
border: 1px solid black;
}
.item-4, .item-5 {
border: 1px solid red;
background: white;
}
.item-4 { width: 100%; } /* 此时width成为flex-basis的fallback值 */
此时 .wrapper 的 width: fit-content 意味着：它的宽度 = 所有子项在不换行、无压缩前提下的自然总宽度 + 间隙（gap）。
而 .item-4 的 width: 100% 并非指向某个固定像素值，而是指向「当前.wrapper内容区宽度」——但问题在于：.wrapper 自身宽度尚未确定（它依赖子项），这就形成了循环依赖。
浏览器实际执行的是以下三步计算：
-
初始估算：先按子项内容宽度粗略估算
.wrapper宽度（如你截图中174.86px）； -
应用
width: 100%：将.item-4的flex-basis设为174.86px（即width作为 fallback 生效）； -
弹性收缩（关键！）：因
.item-4（174.86px）+.item-5（约66.5px） >.wrapper初始估算宽度（174.86px），超出量 ≈66.5px；默认flex-shrink: 1触发收缩，按子项flex-basis比例分配压缩量 →.item-4被压缩至约108.3px（实测值），.item-5压缩至更小值，最终两者刚好填满容器。
✅ 验证方式：添加 flex-shrink: 0 即可阻止收缩：
.item-4 {
width: 100%;
flex-shrink: 0; /* 禁止压缩，此时它将真正尝试占满100% */
}
.item-5 { flex-shrink: 0; } /* 同时禁用兄弟项压缩，否则溢出 */
此时若父容器无明确宽度约束（如 fit-content），.item-4 将迫使 .wrapper 拉伸至 100vw 或触发横向滚动——这恰恰证明：width: 100% 在Flex中本质是一个有副作用的 flex-basis 初始化手段，而非布局指令。
⚠️ 重要注意事项：
- ✖️ 避免在Flex子项上混用
width和flex相关属性（如flex: 1），后者优先级更高，width可能被完全忽略； - ✅ 若需子项铺满剩余空间，请用
flex: 1（等价于flex: 1 1 0），其中flex-basis: 0确保从零开始分配； - ✅ 若需某子项独占一行，请用
flex-basis: 100%+flex-wrap: wrap（比width: 100%更可靠、语义更清晰）； - ? 在响应式场景中，优先使用
flex-basis（如flex: 0 0 33.333%）替代width，避免百分比参照系错乱。
总结：width: 100% 在Flex子项中是一个脆弱的、易被覆盖的初始尺寸声明，它揭示了Flex布局的核心逻辑——尺寸由弹性函数（flex function）主导，而非传统盒模型属性。理解这一点，才能真正掌控现代CSS布局的确定性与可预测性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
