flex-shrink: 1 是默认行为，当子项总宽超容器时按比例缩小所有子项；width 在 Flex 中仅为建议值，实际由 flex-basis 和 flex-shrink 决定；flex: 0 0 200px 比 width + flex-shrink: 0 更可靠；替换元素需显式设 min-width: 0 才能使 flex-shrink: 0 生效。
flex-shrink: 1 是默认行为，不是 bug
Flex 子元素被“无故”压缩，根本不是浏览器出错，而是 flex-shrink: 1 在严格执行它的设计职责：当所有子项的总宽度超过父容器时，按比例缩小每个子项，确保容器不溢出。它不看内容是否可缩——文字、图标、<img> 全部一视同仁参与收缩。
为什么写了 width 还是被压？因为 width 不算数
width 在 Flex 布局里只是建议值，真正起效的是 flex-basis（默认为 auto）。只要没关掉 flex-shrink，浏览器就会忽略你写的 width: 200px，转而用 flex-basis + flex-shrink 重新计算尺寸。
-
flex: 0 0 200px比width: 200px; flex-shrink: 0更可靠——它显式锁定了不放大、不收缩、基准尺寸为 200px - 对
<img>、<button>等替换元素，width: auto常被解析为固有尺寸（比如 800px），反而加剧溢出风险 - 漏写
flex-shrink的简写值（如flex: 0 200px）会让浏览器误把200px当作flex-shrink值，实际变成flex-shrink: 200，压缩更狠
flex-shrink: 0 加了还不生效？检查这三处隐性约束
flex-shrink: 0 本身有效，但常被其他默认规则覆盖：
-
<img>等替换元素默认有min-width: auto（不是 0），会锁死最小宽度 → 必须加min-width: 0 - 父容器设了
min-width: 0，但子项没配，内部长文本（如邮箱地址）仍撑不开 → 子项需单独加min-width: 0 - 祖先节点或框架样式（如 Bootstrap 的
.col）可能悄悄重置了flex-shrink→ 用开发者工具检查 computed styles 中的flex-shrink值
该不该全局禁用 flex-shrink？
别这么做。全局设 * { flex-shrink: 0 } 会让正常流式布局彻底失效。只对真正“尺寸敏感”的元素加：
立即学习“前端免费学习笔记（深入）”；
- 带图标的按钮（图标缩成小点就不可识别）
- 头像、徽标、开关控件（宽高比必须稳定）
- 短文本标签（如“已读”“VIP”，被压成省略号就信息丢失）
- 搜索栏里的提交按钮（输入框用
flex: 1，按钮必须flex-shrink: 0）
复杂点在于：禁用收缩后，若父容器太窄，内容不会换行，而是直接裁切或触发横向滚动——这不是属性失效，是它按预期在工作。
