flex子元素width被压缩是规范行为而非bug，因默认flex-shrink: 1+flex-basis: auto优先于width计算；解决需设flex-shrink: 0或flex: 0 0 auto，专用于按钮、图标、图片等尺寸敏感元素。
flex-shrink: 1 是默认行为，不是 bug
Flex 子元素写了 width: 200px 还被压窄，不是浏览器出错，而是规范要求：所有 flex 项默认带 flex-shrink: 1，只要容器总宽不足，它就会主动按比例缩小——width 在这里只是“初始建议值”，真正参与计算的是 flex-basis 和 flex-shrink。
常见错误现象包括：img 缩成一条线、按钮图标塌陷、短标签（如“VIP”）变成“…”、input 旁的搜索按钮被挤扁。
- 别指望只写
width就能稳住尺寸 -
flex: 1等价于flex: 1 1 0，第三个参数清空flex-basis，width彻底失效 - 父容器若为
display: inline-flex且没设宽度，flex-basis: 50%会失去参照，结果飘忽
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导致文字换行，误判为挤压 - 调试时直接看开发者工具 computed styles 里的
flex-shrink值，别猜；整条 flex 链路都要检查，不止当前元素
更稳妥的写法是 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）
复杂点在于，Flex 百分比宽度从来不是“设了就有效”，它卡在父宽、收缩规则、内容尺寸、盒模型四重约束里。调试时得一层层确认，而不是只盯着那个 width 声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
