flex子元素width失效是因flex-shrink:1默认启用且flex-basis优先于width；解决需设flex-shrink:0并明确flex-basis，对img等替换元素还需min-width:0。
Flex子元素写了width: 200px还被压窄，不是浏览器bug，而是flex-shrink: 1在按规范执行收缩——关掉它，再锚定尺寸起点，问题就解了大半。
为什么width在Flex里根本不管用
因为width只是“建议值”，真正参与计算的是flex-basis；而所有子项默认带flex-shrink: 1，只要父容器总宽不足，浏览器就会无视你写的width，直接按比例缩小。常见现象包括：img缩成一条线、按钮图标塌陷、“VIP”标签变成“…”、input旁的搜索按钮被挤扁。
-
flex: 1等价于flex: 1 1 0，第三个参数清空flex-basis，width彻底失效 - 父容器若为
display: inline-flex且没设宽度，flex-basis: 50%会失去参照，结果飘忽 - 调试时直接看开发者工具 computed styles 里的
flex-shrink值，别猜
flex-shrink: 0不生效的真正原因
加了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导致文字换行，误判为挤压
更稳妥的写法是flex: 0 0 auto
flex-shrink: 0能阻断收缩，但不定义尺寸起点。如果只写它，flex-basis回退到auto，对空div或内容塌缩的img仍可能失效。用flex: 0 0 auto更明确：
- 等价于
flex-grow: 0; flex-shrink: 0; flex-basis: auto，避免被其他简写意外覆盖 - 对图片，还需同步加
width: auto; height: auto，防止框架样式重置 intrinsic 尺寸 - 百分比场景下，
flex: 0 0 30%比单独flex-shrink: 0+width: 30%更可靠 - IE10/11 对
flex-basis: 50%支持差，此时可改用flex-basis: calc(50% - 4px)或固定数量均分
哪些元素必须加flex-shrink: 0
不是所有子项都需要，只对“尺寸敏感”的固定型内容加，否则破坏弹性布局本意：
- 带图标的按钮（图标缩成像素点就不可识别）
-
img标签（哪怕写了max-width: 100%，不关flex-shrink仍可能被压扁） - 头像、徽标、开关控件（宽高比必须稳定）
- 短文本标签（如“已读”“VIP”，一压就变“…”）
- 搜索栏里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0）
容易被忽略的是：min-width: auto这个隐式限制，它藏在img和文本容器背后，不显式设min-width: 0，flex-shrink: 0可能白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
