按钮组超宽的根本原因是内容抗收缩，需同时设flex:1 0 0、min-width:0和white-space:nowrap才能强制等宽收缩。
直接加 flex-shrink: 0 不够，必须配合 min-width: 0 和 white-space: nowrap，否则按钮文字或内边距仍会反向撑开父容器。
为什么 flex:1 按钮组还会超宽
因为 flex: 1 展开的是「剩余空间」，但浏览器默认给 button 设了 min-width: min-content（尤其 Chrome），长文字、图标+文字组合、甚至默认 padding 都会让它拒绝收缩。父容器明明写了 width: 100%，按钮却把整行顶出边界——这不是弹性失效，是内容在“抗收缩”。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，但flex-shrink: 1在 button 上常被隐式min-width覆盖 - 没设
white-space: nowrap时，按钮内空格处换行，视觉上不溢出，但实际布局宽度仍按单行算，导致滚动或遮挡 - 父容器若为
display: flex但没设width或flex: 1，按钮分到的“剩余空间”本身就不准
按钮组真正有效的等宽收缩写法
不用赌 flex: 1 的默认行为，显式切断内容对尺寸的干扰：
- 每个按钮加
flex: 1 0 0（即flex-grow: 1、flex-shrink: 0、flex-basis: 0） - 必须加
min-width: 0，覆盖 button 的隐式最小宽度 - 加
white-space: nowrap防止内部换行干扰宽度计算 - 如果按钮含图标，建议统一用
display: inline-flex+align-items: center，避免 baseline 对齐带来的高度差异
父容器和嵌套结构常被忽略的干扰点
按钮组没超，但整个区域横向滚动？问题大概率不在按钮本身：
立即学习“前端免费学习笔记（深入）”；
- 检查按钮组父容器是否被包在另一个
display: flex元素里——若没设flex: 1或width: 100%，它不会“撑满”，按钮的1fr就只能分到窄缝 - 父容器若设了
padding却漏了box-sizing: border-box，真实宽度 =width+padding× 2，按钮再怎么收缩也填不满这个“虚高”的可用空间 - 用开发者工具看 Computed →
width，确认按钮组父容器渲染宽度是否真等于预期；若显示auto，说明它没被约束
移动端特别要注意的替换元素行为
如果按钮里嵌了 img、svg 或使用了字体图标，它们不受 flex-shrink 控制：
-
img和svg必须额外加max-width: 100%和height: auto - 字体图标（如
::before）需确保伪元素也受box-sizing: border-box约束——全局重置里不能漏掉*::before, *::after - 按钮含
input或select的混合场景，这些表单控件有独立min-width: auto，得单独加min-width: 0
最易被忽略的是：当你看到按钮组“刚好”填满父容器，但页面底部仍有横向滚动条，大概率是某个子项（比如图标、伪元素、未重置的 img）悄悄多占了 1px —— box-sizing 只管计算逻辑，不管内容本身会不会撑开边界。
