flex-shrink: 0 不生效的首要原因是父容器未启用 Flex 布局；需确认父元素设了 display: flex 或 inline-flex，且子元素无 width 冲突、无 min-width:auto 限制、未被 flex 简写覆盖。
flex-shrink: 0 不生效？先检查父容器是否真启用了 Flex
很多情况下 flex-shrink: 0 看似没用，根本原因是父容器压根没进 Flex 布局模式。Flex 属性只在 display: flex 或 display: inline-flex 的直接子元素上起作用。
- 确认父元素设置了
display: flex（不是block、grid或未声明） - 检查是否被其他 CSS 覆盖：用浏览器开发者工具看
flex-shrink是否被标记为 strikethrough（被覆盖） - 注意：如果子元素设了固定宽度（如
width: 200px）且内容撑不开，flex-shrink可能“没机会触发”——它只在容器空间不足时才参与计算
为什么 flex-shrink: 0 后元素还是变窄了？常见三类干扰
即使 flex-shrink: 0 正确应用，视觉上仍可能“缩了”，通常不是它失效，而是别的规则在起作用：
-
min-width或min-content被触发：Flex 子项默认有min-width: auto（Chrome/Firefox），会阻止收缩到文字最小宽度以下；加min-width: 0才真正释放限制 - 内部文本/图片强制换行或溢出：比如长单词没设置
overflow-wrap: break-word，导致容器被动拉宽或压缩布局上下文 - 父容器
flex-wrap: wrap+ 宽度不足：此时子项可能换行，看起来像“缩了”，实际是布局流改变，跟flex-shrink无关
和 flex-grow / flex-basis 搭配时的关键顺序
flex-shrink: 0 单独写没问题，但和 flex 简写属性混用容易踩坑——flex 会重置所有三个值（grow/shrink/basis），覆盖你单独写的 flex-shrink: 0。
- 避免这样写：
flex: 1; flex-shrink: 0;→flex: 1已隐含flex-shrink: 1，后一句无效 - 推荐写法：
flex: 0 0 auto;（即 grow=0, shrink=0, basis=auto），清晰可控 - 若需自适应内容宽但禁止收缩，用
flex: 0 0 max-content;或配合width: fit-content;+min-width: 0;
在响应式中慎用 flex-shrink: 0 的真实代价
设了 flex-shrink: 0 的元素，在小屏幕上大概率会溢出容器，因为系统不再尝试压缩它来腾空间。
立即学习“前端免费学习笔记（深入）”；
- 移动端尤其明显：导航栏里的 logo 图片、固定宽度按钮，一旦
flex-shrink: 0又没配max-width或媒体查询，就会横向滚动 - 替代思路：用
flex: 0 0 min(200px, 30vw)这类响应式basis，比硬关 shrink 更稳妥 - 调试建议：临时加
outline: 1px solid red;查看真实占位，比靠眼睛猜更准
flex-shrink 是个“协商型”属性，不是开关。它的行为高度依赖父容器剩余空间、兄弟元素的 flex 值、以及 min/max 约束——漏掉其中任一环，结果就和预期对不上。
