flex-shrink-0无效的主因是父容器未启用flex布局，需确认父级display为flex/inline-flex并加d-flex；替换元素还需min-width: 0；优先用flex-none更稳妥；禁用收缩可能导致溢出，属正常行为。
flex-shrink-0加了还是被压缩，先看父容器有没有进 Flex 布局
Bootstrap 的 .col、.navbar-nav 默认是 flex 容器，但普通 <div> 不加 <code>d-flex 或 d-inline-flex 就只是块级流——此时所有 flex 工具类（包括 flex-shrink-0）完全不解析。
用浏览器开发者工具检查该元素的 computed styles，重点确认其**直接父级**的 display 是否为 flex 或 inline-flex。如果不是，补上 d-flex 再试。
常见踩坑点：
-
.row默认不是 flex 容器（Bootstrap 5 靠 margin 实现 gutter），不能直接在它上面加flex-shrink-0 - 混用
.col和flex-shrink-0：因为.col内部已设flex: 0 1 auto，会覆盖flex-shrink-0 - 子元素自身有
width或min-width，也可能干扰收缩行为，需一并排查
img、button 这类替换元素必须配 min-width: 0
flex-shrink: 0 对 <img>、<button></button> 等替换元素默认无效，因为浏览器给它们加了隐式 min-width: auto，锁死最小宽度，导致 flex-shrink: 0 形同虚设。
解决方法是显式重置：
.logo-img {
flex-shrink: 0;
min-width: 0;
}
注意：min-width: 0 必须加在**同一元素上**，不能只加在父容器里。
适用场景：
-
<img>作为头像、Logo、商品图——压缩就失比例 - 带图标的
<button></button>或开关控件——图标缩成像素点就不可识别 - 搜索栏里的提交按钮——输入框用
flex: 1，按钮必须flex-shrink: 0且min-width: 0
flex-shrink-0 vs flex-none：选哪个更稳妥
flex-shrink-0 只禁用收缩，不碰放大和基线尺寸；而 flex-none（即 flex: none）等价于 flex: 0 0 auto，同时禁用 grow、shrink，并保留自然尺寸——更彻底，也更安全。
推荐优先使用 flex-none 的情况：
- 导航栏里的 logo、固定宽度按钮、带 padding 的标签
- 需要兼容 IE11 时，回退到
-ms-flex: 0 0 auto（flex: none不支持） - 避免
flex: 0 0 0这种写法——强制基线为 0，文字或图片可能塌缩不可见
注意：flex-none 是 Bootstrap 5 提供的工具类，直接加在子元素上即可，不用写内联样式。
禁止压缩后横向溢出，这不是 bug，是预期行为
禁用收缩后，系统不再尝试压缩该元素腾空间，小屏下就容易突破容器边界。这不是配置错误，而是 flex 布局的正常表现。
缓解方案：
- 对文字内容，加
overflow-wrap: break-word比依赖 flex 收缩更可靠 - 配合
min-width: 0可缓解部分文本溢出（尤其长单词无换行） - 侧边栏固定宽 + 主内容填满时，应给侧边栏设
flex-shrink: 0，主内容设flex-grow: 1且保留默认flex-shrink: 1
最常被忽略的一点是：flex-shrink: 0 只解决“收缩”，不解决“拉伸”“溢出”“换行”——每个问题得用对应机制单独控制。
