按钮在flex容器中被压扁是因flex-shrink: 1默认生效，非浏览器bug；解决需设flex: 0 0 auto并配合min-width: 0及溢出处理。
为什么按钮在Flex容器里会被压扁
不是浏览器bug，是flex-shrink: 1默认生效——只要父容器总宽不够，所有子项（包括按钮）就会按比例缩小。你写的width: 120px只是初始建议值，真正参与计算的是flex-basis和flex-shrink。常见现象：图标缩成小点、文字被截成“…”、按钮圆角塌陷、边框错位。
给按钮加flex-shrink: 0但没效果？先查这几点
看起来加了却还是变形，大概率不是语法写错，而是前提或覆盖问题：
- 父容器没设
display: flex或display: inline-flex→flex-shrink根本不解析 - 按钮上写了
flex: 1或flex: auto→ 这类简写会重置flex-shrink: 1，覆盖你后面写的flex-shrink: 0 - 按钮内部有
<img>或svg，但没配max-width: 100%和height: auto→ 图片原始尺寸强行撑开，压缩逻辑根本没触发 - 祖先元素有
overflow: hidden或text-overflow: ellipsis→ 文字换行被抑制，视觉上像“被压”，实际是内容溢出
更稳妥的写法：用flex: 0 0 auto代替单独flex-shrink
flex-shrink: 0只禁收缩，不定义尺寸起点；对空按钮或含图标按钮，flex-basis: auto可能回退到内容宽度，仍不稳定。推荐直接写完整简写：
.btn {
flex: 0 0 auto; /* 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto */
min-width: 0; /* 解除 flex 默认的 min-width: auto 锁定，尤其防内联元素撑宽 */
}
如果按钮需要固定宽度（比如统一120px），把auto换成具体值：flex: 0 0 120px。注意：此时width会被忽略，以flex-basis为准。
移动端必须配合的收尾动作
设了flex: 0 0 auto后，在窄屏下按钮拒绝让步，容易横向溢出。必须同步处理溢出行为：
- 父容器加
overflow-x: auto（滚动）或overflow-x: hidden（裁切） - 按钮内文字加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，防换行错位 - 若按钮含图标，确保图标本身也用了
flex: 0 0 auto，而不是只作用在外层.btn上
真正难的不是加那行CSS，而是判断这个按钮在所有断点下是否真的“不能缩”——比如工具栏里的操作按钮必须可点，但卡片底部的“更多”按钮缩成图标反而更合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
