flex-shrink: 0 是防止关键 UI 元素失真的硬性约束，必须用于 Logo、图标按钮、固定宽侧边栏、带单位表单控件等场景；常见失效因父容器非 flex、被 flex 简写覆盖、未作用于真正子元素或内容撑宽所致。
flex-shrink: 0 在哪些真实布局里必须加
它不是“可有可无”的修饰，而是防止关键 UI 元素失真的硬性约束。当子元素的尺寸、比例或可读性依赖原始宽度时，不设 flex-shrink: 0 就会出问题。
典型必须加的场景包括：
- 导航栏里的 Logo —— 即使容器缩到 320px，Logo 图片或文字块也不能被压扁成一条线
- 带图标的按钮（如
<button><svg></svg>提交</button>）—— 图标宽高比固定，flex-shrink: 1会让 SVG 缩成模糊小点 - 侧边栏（
width: 240px）—— 响应式中主内容区收缩时，侧边栏若没锁住，会塌成 50px 宽，菜单文字全被截断 - 表单中带单位的输入框（如
<input>px），单位文本需和输入框保持视觉对齐，否则错位明显
为什么 flex-shrink: 0 看起来没生效
最常见的假阴性：你以为加了，但浏览器根本没执行它。原因往往不在声明本身，而在上下文。
- 父容器没开 Flex ——
display是block或grid，flex-shrink直接被忽略 - 被简写覆盖 —— 你写了
flex-shrink: 0，但后面又用了flex: 1或flex: auto，它们会重置所有三个值，flex-shrink回到1 - 子元素不是直接子项 —— 比如图片包在
<div>里，而flex-shrink: 0加在<div>上，但真正要保形的是<img>，那得加在<img>自身上 - 内容撑开了最小宽度 —— 子元素内有一长串无空格邮箱
user@example.com，又没设min-width: 0或overflow: hidden，Flex 算法会优先让内容区“撑开”，而不是压缩，此时flex-shrink: 0根本没机会触发
只写 flex-shrink: 0 还远远不够
它只是收缩意愿开关，不是尺寸保险栓。真实项目里，单靠这一行大概率翻车。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
flex-basis或显式width—— 否则flex-shrink: 0对一个空<div>没意义，它本来就没内容可保 - 图片要加三件套：
max-width: 100%+flex-shrink: 0+ 父容器设min-width: 0（尤其当父容器是 flex 且含文本时） - 防溢出要主动控制父容器：
width或max-width必须明确，否则即使所有子项都flex-shrink: 0，容器也可能被撑破，导致横向滚动失效或内容不可见 - 移动端小屏下，多个
flex-shrink: 0元素并排极易超宽 —— 此时要么加flex-wrap: wrap，要么用媒体查询降级为 column 布局
flex-shrink: 0 和 overflow-x: auto 能不能一起用
能，但必须满足前提：父容器要有明确宽度边界，且子项不能靠内容自动撑宽。
- 父容器必须设
width或max-width（比如width: 100%或max-width: 600px），否则overflow-x: auto可能不触发滚动条 - 子项建议用
flex: 0 0 auto替代单独flex-shrink: 0，避免被后续简写覆盖，也更清晰表达“不伸不缩，按内容定宽” - 子项内部若有长单词或 URL，需加
white-space: nowrap配合overflow: hidden或text-overflow: ellipsis，否则内容会强行拉宽子项，破坏滚动预期 - 慎用
overflow: auto—— 它可能在垂直方向产生意外滚动，优先选overflow-x: auto并确保overflow-y: visible
flex-wrap、min-width 或响应式断点的事。 
