width: 100% 在 Flex 子项中并非简单“占满父容器”，而是在 flex-wrap: wrap 启用时才可触发换行意图；默认 nowrap 下，它会与 flex-shrink 协同压缩尺寸，导致不可预期的宽度收缩或溢出。
`width: 100%` 在 flex 子项中并非简单“占满父容器”，而是在 `flex-wrap: wrap` 启用时才可触发换行意图；默认 `nowrap` 下，它会与 `flex-shrink` 协同压缩尺寸，导致不可预期的宽度收缩或溢出。
在 Flex 布局中，width: 100% 的行为高度依赖父容器的 flex 配置和子项间的弹性交互，绝非传统块级流中的“占满父宽”语义。
以你提供的示例为例：
.wrapper {
display: flex;
width: fit-content; /* 关键：容器宽度由内容决定，非 100% */
margin: 0 auto;
}
.item-4, .item-5 {
border: 1px solid red;
}此时 .wrapper 的宽度（174.86px）是两个子项并排排列时的最小内容包裹宽度（含边框、内边距等）。当你为 .item-4 添加 width: 100%，浏览器会尝试让它占据整个 .wrapper 的计算宽度（即 ~174.86px），但问题在于：
- 父容器未设置
flex-wrap: wrap→ 强制单行（nowrap默认值）； -
.item-4的width: 100%仅作为 initial main size（主轴初始尺寸）参与 flex 计算，而非最终布局约束； - Flex 引擎随即启动空间分配算法：若
.item-4按 100% 占满，则.item-5无剩余空间 → 触发flex-shrink（默认为 1）→ 两个子项按 flex-basis 和权重同比例压缩； - 最终
.item-4宽度变为 108.3px，正是其原始内容宽（约 92px）与.item-5内容宽（约 82px）按 shrink 系数动态协商后的结果 —— 这就是你观察到的“多出一点空间”的本质：不是width: 100%生效了，而是它被当作起点，再被压缩妥协了。
✅ 正确实现“某子项独占一行”的方案（推荐）：
.wrapper {
display: flex;
flex-wrap: wrap; /* ✅ 必须开启换行模式 */
}
.item-4 {
width: 100%; /* ✅ 在 wrap 下，width: 100% = “我要占满本行” */
flex-shrink: 0; /* ✅ 防止被意外压缩（尤其当其他项有 flex-grow） */
}
.item-5 {
flex-shrink: 0; /* 可选，保持自身不压缩 */
}⚠️ 更稳健的替代写法（规避 width 与 flex 属性冲突）：
.item-4 {
flex-basis: 100%; /* ✅ Flex 主轴基准尺寸，语义更精准 */
flex-shrink: 0;
}? 补充说明：
flex-basis: 100%比width: 100%更可靠，因为它直接作用于 Flex 轴计算逻辑，不受flex-grow/shrink的隐式覆盖干扰，且在 Safari/Chrome 等现代浏览器中换行行为稳定（实测截至 2026 年）。
? 注意事项总结：
-
width: 100%在flex-wrap: nowrap（默认）下不会强制换行，只会作为初始尺寸参与弹性压缩； - 若需响应式安全，务必配合
min-width: 0（防止min-width: auto阻止收缩）； - 避免对同一子项混用
width和flex（如flex: 1），后者优先生效，前者可能被忽略； - 当父容器为
fit-content或max-content时，width: 100%的参照仍是该容器的当前计算宽度（非视口），因此结果具有上下文敏感性。
掌握这一机制，你就能精准控制 Flex 中“何时撑满”“何时换行”“何时收缩”，告别凭直觉调试的低效开发。
