因为width在Flex布局中仅为建议值，真正起效的是flex-basis，且子项默认flex-shrink: 1，空间不足时会强制按比例压缩；解决方法是设flex-shrink: 0或flex: 0 0 auto来阻断收缩逻辑。
为什么设置了 width 还是被压缩
因为 width 在 Flex 容器里只是“建议值”，真正参与尺寸计算的是 flex-basis，而所有子项默认带 flex-shrink: 1。只要总宽超限，浏览器就无视你写的 width: 200px，直接按比例缩小——这不是 bug，是规范行为。
用 flex-shrink: 0 阻断收缩逻辑
这是最直接有效的解法：显式设 flex-shrink: 0，让浏览器在分配空间时跳过该元素，不参与任何收缩计算。
-
flex-shrink: 0不影响flex-grow或排列顺序，兼容 IE10+（需加-ms-flex-negative: 0） - 别写
flex-shrink: -1，会被忽略并回退到1 - 不要全局重置
* { flex-shrink: 0 }，会破坏正常流式布局 - 对尺寸敏感的元素才加：按钮、图标、头像、短标签（如“VIP”）、
<img>等
flex: 0 0 auto 和 flex-shrink: 0 有什么区别
二者效果一致，但 flex: 0 0 auto 更明确——它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，避免被其他简写（比如 flex: 1）意外覆盖。
-
flex: 0实际是flex: 0 1 0，仍会收缩，慎用 -
flex: none等价于flex: 0 0 auto，比flex: 0更安全 - 对图片建议优先用
flex: 0 0 auto，而非单独flex-shrink: 0，语义更完整 - 若需锚定具体尺寸，写
flex: 0 0 120px，比width: 120px; flex-shrink: 0更可靠
为什么加了 flex-shrink: 0 还是变形
常见原因是隐性约束未解除，不是 flex-shrink 失效，而是其他默认行为在干扰：
立即学习“前端免费学习笔记（深入）”；
-
<img>等替换元素自带min-width: auto，必须额外加min-width: 0才能生效 - 父容器自身没设
min-width或被外层 flex 压缩，子项再怎么flex-shrink: 0也无框可守 - 误设了
flex-wrap: wrap，看起来像压缩，其实是换行；确认是否真需要单行显示 - 祖先元素有
overflow: hidden或text-overflow: ellipsis，配合默认white-space: normal导致文字换行，误判为挤压
调试时直接看开发者工具 computed styles 里的 flex-shrink 值，别猜；整条 flex 链路都要检查，不止当前元素。
