子元素宽度过大撑开父容器导致横向滚动条的直接原因是父容器默认 overflow-x: visible，解决关键在于让子元素适应父容器边界：对块级子元素设 max-width: 100% 和 box-sizing: border-box；img/SVG 加 max-width: 100% 和 height: auto；flex 子项设 min-width: 0；table 需 table-layout: fixed + width: 100% 或配合 word-break。
子元素宽度过大撑开父容器，出现意外横向滚动条
直接原因是父容器默认 overflow-x: visible，而子元素（比如长文本、表格、inline-block 元素或未设限的 img）实际渲染宽度超过父容器，浏览器就会在视口层面添加横向滚动条——哪怕你没显式设置 overflow。
这不是 bug，是 CSS 盒模型的自然行为。关键不是“隐藏滚动条”，而是让子元素主动适应父容器边界。
- 优先给子元素加
max-width: 100%（对块级子元素有效），配合box-sizing: border-box - 若子元素是内联或弹性布局内容，改用父容器控制：设
overflow-x: hidden是最粗暴有效的兜底，但会截断内容，慎用 - 遇到
white-space: nowrap或display: inline-block的子项，必须同时处理换行和尺寸约束，单靠max-width不起作用
img 或嵌入内容超出父容器，拉伸页面宽度
img 默认不响应式，即使父容器宽度固定，它也会按原始尺寸渲染，导致溢出。这不是父容器的问题，是媒体元素自身的尺寸策略缺失。
解决方式非常具体：
立即学习“前端免费学习笔记（深入）”；
- 给所有
img加max-width: 100%和height: auto，强制等比缩放 - 如果
img在figure或带 padding 的容器里，记得检查box-sizing是否为border-box，否则padding+width: 100%仍可能溢出 - SVG 也要同样处理；
iframe需额外加width: 100%，且确保其父容器有明确宽度（不能是fit-content）
flex 容器中子项不收缩，导致父容器横向溢出
Flex 子项默认 flex-shrink: 1，但一旦设置了 min-width（尤其是 min-width: auto，这是图片、输入框等替换元素的默认值），就可能拒绝收缩，撑破父容器。
典型场景：一行 input + button 放在 display: flex 的工具栏里，小屏幕下按钮被挤出。
- 给子项显式设
min-width: 0（对input、img、textarea尤其关键） - 避免对 flex 子项设
width: 100%，改用flex: 1或flex: 0 1 auto - 父容器别漏掉
flex-wrap: wrap—— 如果允许折行，比硬撑更合理
table 布局内容过长，触发横向滚动且无法用 max-width 控制
表格是个特殊角色：table 元素无视 max-width，td 也不响应 width: 100%。它的宽度由内容和 table-layout 决定。
真正可控的只有两个点：
- 给
table设table-layout: fixed，再配width: 100%，此时列宽由第一行th/td的width或col元素决定 - 对可能含长文本的
td，加word-break: break-word或overflow-wrap: break-word，并确保white-space: normal（不要留着nowrap） - 如果表格必须保持自动布局（
table-layout: auto），那就只能靠父容器overflow-x: auto包裹，并接受局部滚动——这是唯一可靠方案
最常被忽略的是：给 table 加了 max-width 却没设 table-layout，等于白加。CSS 对表格的控制粒度，远不如普通块级元素直接。
