flex-shrink: 0 失效主因是父容器未设 width/max-width 导致无收缩空间；需配合 overflow: hidden、white-space: nowrap 等控制溢出，且注意 flex-basis 和兄弟项影响。
flex-shrink 0 不起作用？先确认父容器有没有设 max-width 或 width
很多情况下，flex-shrink: 0 看似没效果，其实是父级 flex 容器本身没约束宽度，子项再怎么“不缩”，浏览器也会按内容撑开整个布局。Flex 项默认会收缩（flex-shrink: 1），但前提是父容器有明确的可用空间限制。
实操建议：
- 给父容器加
width、max-width或min-width（比如width: 300px），否则flex-shrink: 0就像给一辆没刹车的车装手刹——逻辑对，但没触发条件 - 如果父容器是
display: flex且在 body 下，记得检查 body/根元素是否设置了overflow-x: hidden，否则溢出内容会拖动横向滚动条，掩盖“隐藏”效果 - 用 Chrome DevTools 的 Layout 面板看 computed
flex-basis和flex-shrink值，确认样式确实被应用且未被覆盖
内容溢出隐藏必须配 overflow: hidden，光靠 flex-shrink: 0 不行
flex-shrink: 0 只控制“是否参与收缩”，不控制“超出后怎么显示”。它和 overflow 是两套机制：前者管尺寸分配，后者管渲染裁剪。
常见错误现象：
- 文字或图片明显超出容器右边界，但没被截断，只是“伸出去了”
- 加了
flex-shrink: 0后，文本依然换行或撑高容器——说明你真正要的是单行截断，不是防收缩
实操建议：
- 对需要隐藏溢出的子项，同时设置：
flex-shrink: 0+overflow: hidden+white-space: nowrap（文本场景） - 如果是图片或块级内容，还要加
width: 0或min-width: 0（防止 flex 默认的min-width: auto干扰裁剪） - 别漏掉
text-overflow: ellipsis，否则即使隐藏了，也不会显示省略号
为什么有时加了 flex-shrink: 0 还是被压缩？检查 flex-basis 和兄弟项
Flex 项的实际尺寸 = flex-basis（基础尺寸） + 剩余空间按 flex-grow/flex-shrink 分配。如果 flex-basis 是 auto（默认），浏览器会先按内容宽度算一个初始值，再决定要不要缩——这时候 flex-shrink: 0 才真正生效。
容易踩的坑：
- 把
flex-basis设成100%或具体像素（如flex-basis: 200px），但父容器空间不足，flex-shrink: 0就保不住它——因为 shrink 是对“超出 flex-basis 的部分”起作用，不是对最终尺寸兜底 - 兄弟项用了
flex-grow: 1，疯狂抢占空间，导致你的项被挤到最小内容宽，看起来像被压缩了（其实没 shrink，是被挤） - 父容器用了
flex-wrap: wrap，溢出直接换行，根本不会触发 shrink 逻辑
React/Vue 中动态内容下 overflow: hidden 失效？注意重排和字体加载
在框架里，文字截断常在首次渲染时正常，后续更新后失效。这通常不是 flex 设置问题，而是 DOM 更新后未触发重排，或字体还没加载完导致宽度计算错误。
实操建议：
- 避免在
useEffect或mounted里直接读offsetWidth判断是否溢出——字体可能还没就绪，改用ResizeObserver监听尺寸变化 - 服务端渲染（SSR）场景下，
font-display: optional可能导致首屏文字宽度估算偏差，加font-display: swap更稳妥 - 不要依赖 JS 动态加
text-overflow类名来“修复”，优先用纯 CSS 组合：flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
最麻烦的点往往不在 flex 属性本身，而在你没意识到：浏览器对“内容宽度”的判断，是在字体加载、行高计算、甚至 emoji 渲染之后才确定的。这时候强行设 flex-shrink: 0，就像提前锁门却忘了钥匙还在别人手里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
