flex子元素width失效是因flex-shrink:1默认启用，需用flex:0 0 auto确保不收缩，并解除min-width:auto等隐性约束；图片等替换元素还需加min-width:0。
Flex子元素写了width: 200px却还是被压窄，不是你写错了，而是浏览器按规范在执行收缩逻辑——flex-shrink: 1默认开启，width只是建议值，真正参与计算的是flex-basis和flex-shrink。
为什么flex-shrink: 0加了还不生效
看起来加了但没用，大概率不是语法问题，而是隐性约束没解除：
- 父容器没设
display: flex或display: inline-flex→flex-shrink根本不会解析 - 子项用了
flex: 1这类简写 → 它隐含flex-shrink: 1，会覆盖后面单独写的flex-shrink: 0 - 子项是
<img>等替换元素 → 浏览器默认加了min-width: auto，必须额外加min-width: 0才真正释放 - 祖先元素有
overflow: hidden或text-overflow: ellipsis→ 配合white-space: normal导致文字换行，视觉上像“被压”
调试时直接看开发者工具 computed styles 里的flex-shrink值，别猜；整条 flex 链路都要检查，不止当前元素。
flex: 0 0 auto比单独flex-shrink: 0更可靠
flex-shrink: 0只禁用收缩，不定义尺寸起点。如果flex-basis回退到0（比如空<div>）或<code>auto（但内容塌缩），仍可能失效。
flex: 0 0 auto明确等价于：flex-grow: 0 + flex-shrink: 0 + flex-basis: auto，避免被其他简写意外覆盖。
对图片还要同步加：
width: autoheight: automin-width: 0
否则框架重置样式可能破坏 intrinsic 尺寸。
哪些元素必须加flex-shrink: 0或flex: 0 0 auto
不是所有子项都需要，只对“尺寸敏感”的固定型内容加，否则破坏弹性布局本意：
- 带图标的按钮（图标缩成像素点就不可识别）
-
<img>标签（哪怕写了max-width: 100%，不关flex-shrink仍可能被压扁） - 头像、徽标、开关控件（宽高比必须稳定）
- 短文本标签（如“已读”“VIP”，一压就变“…”）
- 搜索栏里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0）
百分比场景下flex-basis要慎用
flex: 0 0 30%比单独flex-shrink: 0 + width: 30%更可靠，因为width在 flex 容器里不参与主轴尺寸分配。
但 IE10/11 对flex-basis: 50%支持差，此时可改用：
flex-basis: calc(50% - 4px)- 或用固定数量均分（如三列就写
flex: 0 0 calc(33.333% - 4px)）
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都比写错一行 CSS 更难调试。
