根本原因是子项默认flex-shrink: 1导致空间不足时主动压缩；解决方法是为尺寸敏感元素（如按钮、图标、图片、短标签）显式设flex-shrink: 0或flex: 0 0 auto，从源头跳过收缩计算。
Flex 布局下子元素被压扁、文字换行、图标缩成小点，根本不是容器太小，而是默认 flex-shrink: 1 在主动压缩——关掉它，问题就解了一大半。
为什么设置了 width 还是被压缩
因为 width 在 Flex 布局里只是“参考值”，真正起效的是 flex-basis；而所有子项默认带 flex-shrink: 1，只要总宽超限，浏览器就会无视你写的 width: 200px，强行按比例缩小。
-
flex-shrink: 0是唯一能从计算源头跳过收缩逻辑的声明 - 单独写
width+flex-shrink: 0可能仍失效：若flex-basis是auto但内容塌缩（比如空 div），尺寸还是不对 - 更稳妥的写法是
flex: 0 0 200px：显式锁死flex-grow、flex-shrink和flex-basis，不依赖width
哪些元素必须加 flex-shrink: 0
不是所有子项都需要，只对“尺寸敏感”的固定型内容加，否则会破坏弹性布局本意：
- 带图标的按钮（图标缩成像素点就不可识别）
-
max-width: 100%，不关flex-shrink仍可能被压扁） - 头像、徽标、开关控件（宽高比必须稳定）
- 短文本标签（如 “已读”“VIP”，一压就变 “…”）
- 搜索栏里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0）
flex-shrink: 0 不生效的常见原因
看起来加了但没用，大概率不是语法错，而是被其他规则覆盖或前提不满足：
- 父容器没设
display: flex或display: inline-flex→flex-shrink完全不解析 - 用了
flex: 1这类简写，它隐含flex-shrink: 1，会覆盖后面单独写的flex-shrink: 0 - 子项是内联元素（如
）且含长单词，flex-shrink: 0锁住了宽度，但内容溢出被裁切，视觉上像“被压” - 祖先元素设了
overflow: hidden或text-overflow: ellipsis，和white-space: normal叠加，造成截断错觉 - Chrome/Firefox 默认给 flex 项加
min-width: auto，得配合min-width: 0才真正释放限制
图片防挤压的最小可靠组合
单写 flex-shrink: 0 对
- 直接加在
flex: 0 0 auto; width: auto; height: auto; - 若父容器有固定高度且
align-items: stretch（Flex 默认），图片会被垂直撑开 → 此时flex-shrink: 0无效，得加object-fit: contain或改父容器align-items: flex-start - 响应式场景中，
min-width: 0比flex-shrink: 0更底层有效（它重置 flex 算法的最小内容宽度假设） - 慎用
width: 100%：它会覆盖 intrinsic 尺寸，和flex-shrink: 0配合反而更容易错乱
最易忽略的点：flex-shrink 生效前提是父容器真进了 Flex 布局，且你检查的是 computed styles 里最终生效的值——不是你写了，它就一定在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
