移动端按钮溢出根本原因是布局上下文未约束其宽度，需在flex容器中设明确width/max-width、按钮加flex-shrink:0及white-space:nowrap，父容器配position:relative（若absolute定位），并统一box-sizing:border-box确保padding包含在宽高中。
移动端按钮超出容器，根本不是按钮本身“太宽”，而是它所在的布局上下文没框住它——flex、float 或隐式 width: auto 都会让按钮悄悄撑开父级，最终溢出视口或遮挡其他内容。
flex 容器里按钮撑宽父容器
常见于「头像+文字+操作按钮」这类横向排列结构，父容器设了 display: flex，按钮加了 flex: 0 0 auto 或没设收缩控制，结果按钮文字一长（比如「立即续费」变成「立即续费（限时8折）」），整个行就横向溢出。
- 必须给按钮加
flex-shrink: 0，但光这个不够——还要确保父容器有明确宽度约束，比如width: 100%或max-width: 375px - 按钮内文字要防换行：
white-space: nowrap是必须的；否则浏览器在空格处断行，视觉上没溢出，但实际滚动逻辑失效 - 如果按钮是纯文字（如
<a></a>），得先设display: inline-block，否则垂直方向padding不生效，热区不足 44px
绝对定位按钮脱离锚点漂移
写 button { position: absolute; right: 16px; bottom: 16px; } 却没给父容器加 position: relative，按钮就会往上找最近的定位祖先（可能是 ），一旦页面滚动或弹层出现，按钮就“飞走”。
- 修复只需一行：
.card, .modal-body, .form-section { position: relative; } - 更推荐用
flex替代：margin-left: auto推到右侧，margin-top: auto推到底部，不依赖定位上下文，也不怕滚动穿透 - 若必须用
absolute，记得加box-sizing: border-box和min-width: 44px，防止 iOS 小屏下点击失焦
文字按钮因 padding + box-sizing 失控
加了 padding: 12px 20px 后按钮变宽、挤出卡片、甚至把右上角关闭按钮顶出屏幕——这不是按钮太“胖”，是默认 box-sizing: content-box 把 padding 算在 width 外面了。
- 所有可点击元素统一加：
box-sizing: border-box，让padding和border包含在设定的宽高内 - 纯行内标签（
<a></a>,<span></span>）必须显式设display: inline-block或block，否则padding垂直方向无效 - 短文本按钮（如「×」、「→」）要补
min-width: 44px，iOS 要求触控目标最小 44×44px，仅靠padding不够
真正卡住的往往不是样式写法，而是按钮所在容器是否具备「尺寸感知能力」：flex 容器缺 width、定位父级缺 position: relative、行内元素缺 display 和 box-sizing——这三处漏掉任何一项，按钮都会在某个机型或字体设置下突然越界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
