flex-shrink-0未生效的首要原因是父容器未设为Flex布局，需显式添加d-flex类；其次需排查是否与.col等内置Flex类混用、子元素宽高设置冲突，以及区分flex-shrink-0与更彻底的flex-none适用场景。
flex-shrink-0 类没生效？先确认父容器是不是 Flex 容器
加了 flex-shrink-0 却还是被压缩，大概率是父容器压根没进 Flex 布局。Bootstrap 的 .col、.navbar-nav 等类默认启用 Flex，但普通 <div> 必须显式加 d-flex（或 d-inline-flex）才生效。否则浏览器直接忽略所有 flex 相关工具类，包括 flex-shrink-0。
用开发者工具检查该元素的 computed styles，重点看父级的 display 是否为 flex 或 inline-flex；如果不是，补上 d-flex 再试。
- 别在
.row上直接加flex-shrink-0：.row 默认不是 flex 容器（Bootstrap 5 中仅靠 margin 实现 gutter），得手动加d-flex - 避免和
.col混用：.col内部已设flex: 0 1 auto，会覆盖flex-shrink-0 - 如果子元素自身有
width或min-width，也可能干扰收缩行为，需一并排查
flex-shrink-0 vs flex-none：该选哪个
flex-shrink-0 只禁用收缩，不碰放大和基线尺寸；而 flex-none（即 flex: none）等价于 flex: 0 0 auto，同时禁用 grow、shrink，并保留自然尺寸——更彻底，也更安全。
尤其对 logo、固定宽按钮、带 padding 的标签这类内容，优先用 flex-none：
-
flex: 0 0 0是危险写法：强制flex-basis: 0，文字或图片可能塌缩不可见 - IE11 不支持
flex: none，如需兼容，得回退到-ms-flex: 0 0 auto - 若项目已放弃 IE，
flex-none比flex-shrink-0更明确，不易误读
图片/按钮仍被压扁？这不是 shrink 的问题
加了 flex-shrink-0 后图片还是变矮变扁，是因为 flex-shrink 只控制主轴（通常是水平）收缩，不管交叉轴（垂直）拉伸。默认 align-items: stretch 会强行撑高图片，而 object-fit: fill 又默认拉伸填充。
必须组合三者才能控住：
- 显式设置
height（如height: 40px） - 加
object-fit: cover或contain - 再加
flex-shrink-0（且必须加在**直接父级为 flex 容器**的那个<img>上） - 如果用了
.img-fluid，它自带height: auto，会和object-fit冲突，需显式覆盖
小屏下横向溢出？这是预期行为，不是 bug
flex-shrink: 0 的作用就是“不收缩”，系统不再尝试压缩它腾空间。一旦内容宽度超过容器，就会溢出——尤其是长单词、URL、无空格字符串。
这不是失效，而是机制使然。缓解方式有限且需按场景选：
- 对纯文本内容，加
overflow-wrap: break-word比依赖 flex 收缩更可靠 - 配合
min-width: 0可缓解部分溢出（尤其内联元素或 flex 项内部含长文本） - 别指望
flex-shrink-0解决换行、截断、拉伸等问题——每个都得用对应机制单独控制
最常被忽略的一点是：flex-shrink: 0 只解决“收缩”，不解决“拉伸”“溢出”“换行”。写完类名，还得看内容本身是否可控。事情说清了就结束。
