flex-shrink: 0是最底层解法，但加了仍变形主因是父容器未启用flex、被flex简写覆盖、替换元素缺min-width: 0、或未作用于真正子元素。
直接设 flex-shrink: 0 是最有效、最底层的解法，但只对“空间不足时被压扁”这个场景起作用；它不是万能缩放锁，加了还变形，大概率是其他隐性约束没控住。
为什么 flex-shrink: 0 加了还是被压缩？
常见现象：明明写了 flex-shrink: 0，图标按钮在 iPhone 上仍缩成一个点，或文字标签被压出省略号。这不是属性失效，而是它根本没被触发，或被更高优先级规则覆盖：
- 父容器没设
display: flex或用了inline-flex→flex-shrink完全不解析 - 子元素上用了
flex: 1这类简写 → 它等价于flex: 1 1 0，会覆盖后面单独写的flex-shrink: 0 - 子元素是
<img>或<button></button>，但没配min-width: 0→ 浏览器默认给替换元素加min-width: auto，锁死最小宽度，flex-shrink: 0形同虚设 -
<img>被包在<div> 里，<code>flex-shrink: 0却加在<div> 上 → 必须加在 <code><img>本身才生效哪些元素必须加 flex-shrink: 0？
别全局重置
* { flex-shrink: 0 }，这会让整个 Flex 布局失去弹性。只锁定那些“失宽即失效”的关键项：-
<img>（头像、Logo、商品图）—— 压缩就失比例 - 带图标的
<button></button>或开关控件 —— 图标缩成像素点就不可识别 - 短文本标签（如 “VIP”“已读”）—— 一压就变 “…”
- 搜索栏里的提交按钮 —— 输入框用
flex: 1，按钮必须flex-shrink: 0 - 固定宽侧边栏、表单中带单位的输入框（如 “px” 文本）
怎么写才真正生效？
单独写
flex-shrink: 0风险高，推荐用更明确、更不易被覆盖的组合：- 对图片：
flex: 0 0 auto; min-width: 0; max-width: 100%; height: auto; - 对文字按钮：
flex: 0 0 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 对固定尺寸图标：
flex: 0 0 24px;（显式锁死flex-basis） - 避免写
width: 100%—— 它和flex-basis冲突，在 Safari iOS 上尤其不稳定
移动端还要额外注意什么？
手机端变形常是多个默认行为叠加的结果，不能只盯
flex-shrink：- 检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否缺失 —— 没它，所有 Flex 计算都基于桌面视口 - 父容器若用了
position: fixed或max-width: 100%，本身宽度受限，子项再怎么锁也无框可守 - 调试时别只看
flex-shrink是否为 0，重点查 DevTools 的「Layout Width」值和flex-basis实际解析结果（常显示为auto或具体像素） -
flex-shrink: 0不防溢出 —— 所有锁定项总宽超容器时，会触发横向滚动条，而不是自动换行
-
