根本原因不是类没生效，而是父容器未启用Flex布局或子元素被其他CSS规则覆盖；Bootstrap的.col等默认启用Flex，但普通div需加d-flex才生效，且flex-shrink:0须配合flex-basis、min-width等属性协同控制。
为什么加了 flex-shrink: 0 还是被压缩
根本原因不是类没生效，而是父容器没进 flex 布局，或子元素被其他规则覆盖。bootstrap 的 .col、.navbar-nav 等默认启用 flex，但普通 <div> 不加 d-flex 就只是块级流——此时 flex-shrink: 0 完全不解析。
- 用浏览器开发者工具检查该元素的 computed styles，确认
display父级确实是flex或inline-flex - 检查是否被
width、min-width或flex简写覆盖：比如写了flex: 1后再加flex-shrink: 0，后者会被忽略 - Bootstrap 5 提供
.flex-shrink-0工具类，直接加在子元素上即可，不用写内联样式
flex: none 和 flex-shrink: 0 选哪个
flex: none 更稳妥，它等价于 flex: 0 0 auto，同时禁用放大、收缩、并保留自然尺寸；而单独设 flex-shrink: 0 只停收缩，仍可能被 flex-grow 拉宽或受 flex-basis 干扰。
- 导航栏里的 logo、固定宽度按钮、带 padding 的标签，优先用
flex: none - 若需兼容 IE11，不能用
flex: none（不支持），得回退到-ms-flex: 0 0 auto -
flex: 0 0 0是危险写法：强制基线为 0，文字或图片可能塌缩不可见
图片、按钮这类替换元素为啥还是被压扁
因为 flex-shrink: 0 只管主轴收缩，不管交叉轴拉伸。图片默认 object-fit: fill，且父容器 align-items: stretch 会强行撑高——这不是收缩问题，是渲染行为没控住。
- 必须组合三者：
object-fit: cover（或contain）、显式height（如height: 100px）、flex-shrink: 0 - Bootstrap 的
.img-fluid自带height: auto，会和object-fit冲突，需显式覆盖height - 如果图片嵌套在多层 flex 中（如
.card > .d-flex > img），flex-shrink: 0必须加在直接父级为 flex 的那个img上
响应式下设了 flex-shrink: 0 却横向溢出
这是预期行为，不是 bug。禁用收缩后，系统不再尝试压缩该元素腾空间，小屏下就容易突破容器边界。
- 配合
min-width: 0可缓解部分文本溢出（尤其长单词无换行） - 对文字内容，加
overflow-wrap: break-word比依赖 flex 收缩更可靠 - 侧边栏固定宽 + 主内容填满时，应给侧边栏设
flex-shrink: 0，主内容设flex-grow: 1且保留默认flex-shrink: 1
