按钮缩不动主因是未触发收缩流程，关键在flex-basis是否有明确值及min-width限制；flex:1会忽略width，需用flex:1 1 auto或flex:0 0 120px；iOS Safari需min-width:1px+box-sizing:border-box。
flex-shrink: 0 不是按钮缩不了的主因
按钮在 Flex 容器里“缩不动”，往往不是因为你没设 flex-shrink: 0，而是它压根没进入收缩流程——浏览器根本没判定需要压缩。关键看两点：flex-basis 是否有明确值、子项内容是否自带最小宽度枷锁。
-
flex-basis: auto（默认）时，按钮按文字+内边距+边框撑开，若总宽 ≤ 父容器可用空间，flex-shrink就不触发 -
<button>在 Chrome/Firefox 默认带min-width: auto，iOS Safari 更激进（min-width: min-content），哪怕写了flex-shrink: 1，也缩不到比文字还窄 - 父容器用了
gap或子项有margin，会进一步挤占可用空间，但浏览器计算收缩时并不自动扣减这些
为什么 flex: 1 会让按钮彻底无视 width
flex: 1 是 flex: 1 1 0% 的简写，第三个值 0% 表示 flex-basis: 0%，即放弃所有自身尺寸参考。此时你写的 width: 120px 完全被忽略，按钮尺寸由内容固有宽度 + UA 默认 min-width 决定。
- 想让按钮参与弹性分配但又保留基础宽度，改用
flex: 1 1 auto，flex-basis: auto会读取width值（如果存在） - 若必须固定宽度，别混用
width和flex: 1；直接上flex: 0 0 120px，语义清晰且无歧义 - 注意：某些 UI 库（如 Ant Design）会给
<button>加全局min-width，需检查 computed 样式确认是否被覆盖
iOS Safari 下按钮宽度异常的硬解法
iOS Safari（15+）对 <button> 有强 UA 保护，min-width: 0 会被静默忽略，导致同为 flex: 1 的按钮在不同设备上宽度差异极大。
- 实测有效方案是降级为
min-width: 1px，既绕过 UA 强制逻辑，又不影响视觉表现 - 必须配合
box-sizing: border-box，否则 padding/border 会额外加宽，让“1px”失去意义 - 若按钮内含图标（如
<svg>），还需确保 SVG 本身没设width/height属性，否则可能触发 intrinsic size 锁定
真正能压缩按钮的组合写法
想让按钮响应式缩小（比如从 120px 缩到 80px），不能只调 flex-shrink 数字，得先打开收缩通道：
立即学习“前端免费学习笔记（深入）”；
- 显式设
flex-basis: 120px（或具体值），给浏览器一个可缩的起点 - 加
min-width: 0解除 UA 默认锁，否则缩到文字宽度就停了 - 对内部文本加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis，防长文本强行撑开 - 避免
padding过大：content-box 下 padding 是额外加宽，建议统一用box-sizing: border-box
最易被忽略的是：按钮是否真的处于「可缩状态」——用 DevTools 检查父容器 computed width 和所有子项 flex-basis 总和，若后者 ≤ 前者，flex-shrink 根本不会运行。
