flex-shrink: 0 仅在父容器为 display: flex/inline-flex 且作用于直接子元素时生效，常因父容器未设 flex、被 flex 简写覆盖、内容撑宽或未配合 min-width: 0 等导致失效；更可靠写法是 flex: 0 0 auto，并需协同 white-space、overflow、max-width 等属性控制溢出。
不能靠“阻止收缩”来解决溢出问题——Flex子元素默认就会收缩，真正要做的，是明确它“不该缩”还是“缩了也得截断”。
flex-shrink: 0 为什么经常没反应？
它只在父容器是 display: flex 或 display: inline-flex 时生效，且必须作用于直接子元素。常见失效不是写错了，而是：
- 父容器漏写了
display: flex（比如误设为grid或留空） - 子元素被
flex: 1、flex: auto这类简写覆盖——flex: 1等价于flex: 1 1 0，会把flex-shrink: 0覆盖掉 - 开发者工具里看到
flex-shrink: 0被划掉（strikethrough），说明有更高优先级规则在起作用 - 子元素内容本身撑宽了（比如长 URL、未设
max-width: 100%的<img>），此时“没缩”是内容在抵抗，不是flex-shrink生效了
更可靠的写法：用 flex: 0 0 auto
flex: 0 0 auto 是 flex-grow、flex-shrink、flex-basis 的完整简写，明确禁用伸缩且以内容宽度为基准，比零散声明更稳定：
-
flex: 0 0 auto→ 不放大、不缩小、基础尺寸按内容算 -
flex: 0 0 max-content→ 适合文字标签等需完全贴合内容的场景 -
flex: 0 0 fit-content→ 在部分浏览器中行为更接近预期，但兼容性略弱于max-content - 避免混用：
flex: 1后再写flex-shrink: 0无效；flex-basis: 100%可能导致初始尺寸过大，反而加剧溢出
单靠 flex-shrink: 0 或 flex: 0 0 auto 往往不够
尤其当子元素内部含文本或图片时，还需配合以下属性才能真正“锁死”视觉表现：
- 给子元素加
min-width: 0：解除 Flex 默认的min-width: auto锁定，否则长文本会强制撑宽整个项 - 对单行文本，加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis（三者必须同级共存） - 对
<img>，必须同时设max-width: 100%和height: auto，否则原始尺寸绕过 Flex 控制 - 检查父容器是否意外设了
flex-wrap: wrap——换行不是压缩，但视觉上容易混淆
响应式下设 flex-shrink: 0 的真实代价
它不会让元素“变大”，但会让它彻底拒绝让步。小屏幕上最常见后果是横向溢出：
- 容器没设
overflow-x: auto→ 内容被裁切或触发全局横向滚动 - 父容器宽度由 viewport 决定，而子项又拒绝收缩 → 必然溢出
- 某些 UI 组件（如带图标的按钮）设了
flex-shrink: 0后，在窄屏上直接跑出视口，用户点不到
这不是 bug，是 Flex 布局的确定性行为：你关掉了收缩开关，就得自己处理溢出。真正难的不是加那一行 flex-shrink: 0，而是想清楚——你到底要固定尺寸，还是要可控截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
