Flex子项width失效的真正原因是默认flex: 0 1 auto中flex-shrink: 1开启压缩，且flex-basis: auto优先于width生效；width仅作初始参考，主轴尺寸由flex-basis和flex-shrink共同决定。
flex子项width失效的真正原因不是写错了CSS
浏览器对Flex子项的默认处理是flex: 0 1 auto，其中flex-shrink: 1允许压缩，flex-basis: auto会优先按内容宽度计算——你写的width: 50%根本没机会生效。这不是bug，是Flex布局的设计逻辑：width只是初始参考值，真正参与主轴尺寸分配的是flex-basis和flex-shrink。
-
flex-shrink: 1开启时，子项会主动“让出”空间，哪怕你设了width，它也会被压窄 - 父容器若没显式宽度（比如
display: inline-flex又没内容撑开），width: 50%就失去参照，结果更不可控 -
flex: 1等价于flex: 1 1 0，第三个值0直接把flex-basis清零，width彻底失效
为什么flex-shrink: 0能解决问题
关掉收缩开关后，子项不再响应剩余空间挤压，width或flex-basis才能真正落地。但注意：只加flex-shrink: 0还不够稳妥，必须同时明确flex-basis，否则仍可能回退到auto。
- 推荐写法：
flex: 0 0 50%（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 50%） - 次选写法：
flex-shrink: 0; flex-basis: 50%（不能只写flex-shrink: 0; width: 50%） - 避免混合：
width: 200px和flex-basis: 50%不要共存，浏览器行为不一致
父容器宽度没定死，flex-basis: 50%照样失效
百分比值必须有参照物。如果父容器本身宽度不确定（比如display: inline-flex、浮动、绝对定位、或被max-width限制），那50%就按那个“飘着”的宽度算，结果远低于预期。
- 用开发者工具检查父容器Computed中的
width值，确认是否是你认为的“全宽” - 如果父容器是
inline-flex，要么给它加width: 100%，要么改用display: flex - 内容里有长单词或
white-space: nowrap时，min-width: auto会兜底撑开子项，表面看是“宽度变大”，实际是百分比被架空
IE和旧Safari里flex-basis: 50%不兼容怎么办
IE10/11对flex-basis支持有限，百分比值常被忽略；老版Safari（≤12.1）也有类似问题。此时不能依赖flex-basis，得换策略。
立即学习“前端免费学习笔记（深入）”；
- 固定数量子项（如两个）：统一用
flex: 1，靠均分机制实现视觉上的50% - 用
calc()兜底：flex-basis: calc(50% - 4px)（减去间隙）比纯百分比更可控 - 极端兼容场景：放弃百分比，改用
flex-basis: 0; flex-grow: 1配合固定数量，或退回display: table
复杂点在于，Flex百分比宽度从来不是“设了就有效”，它卡在父宽、收缩规则、内容尺寸、盒模型四重约束里。漏查任意一环，都会让你在DevTools里反复刷新却看不出变化。
