根本原因是body不创建强bfc且裁剪作用域未覆盖真正溢出源，需在最靠近溢出源、有明确宽度的父容器（如#panels）上设置overflow-x:hidden或auto，并确保其width、min-width:0等属性正确。
body { overflow-x: hidden } 为什么在移动端失效
根本原因不是属性写错了，而是裁剪作用域没落到真正溢出的元素上。body 设置了 overflow-x: hidden，但真正撑宽的是某个子容器（比如 #panels-container），而它的直接父级 #panels 没设溢出控制，浏览器就把横向溢出“透传”到视口了。
移动端尤其明显，因为 Safari 和部分 Android WebView 对 BFC（块格式化上下文）触发更敏感，body 默认不创建强 BFC，无法可靠截断深层嵌套的溢出。
- 优先在**最靠近溢出源的、有明确宽度边界的父容器**上加
overflow-x: hidden或overflow-x: auto - 确保该容器设置了
width: 100%或max-width: 100%，否则宽度计算可能异常 - 避免该容器使用
float、position: absolute或display: inline-block—— 这些会破坏 BFC - 必须检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否存在且未被覆盖
表格横向滚动不生效的硬性条件
给 <table> 直接加 <code>overflow-x: auto 永远无效。滚动必须由外层 <div> 承担，且需同时满足三个条件：
<ul><li>外层 <code><div> 必须设 <code>overflow-x: auto 和明确宽度（如 width: 100% 或固定值）
<table> 要加 <code>table-layout: fixed，否则列宽由内容撑开，滚动逻辑失去前提
<td> 和 <code><th> 必须统一设 <code>white-space: nowrap，防止换行干扰宽度计算
-webkit-overflow-scrolling: touch，否则 iOS Safari 可能拖不动或卡顿如果外层 <div> 在 <code>flex 容器里，还得额外加 min-width: 0，否则 flex item 默认不收缩，滚动区被“锁死”。
图片/媒体元素撑宽页面的隐蔽原因
一张没约束的 <img src="banner.jpg"> 就足以让整个页面出现横向滚动条，尤其在小屏上。这不是 bug，是默认行为：图片按原始尺寸渲染，不自动缩放。
- 全局加
img { max-width: 100%; height: auto; }是最低成本方案 - 视频、iframe、canvas 同理，也要加
max-width: 100%和height: auto - 注意
box-sizing: border-box必须全局启用，否则padding+width: 100%会超出容器实际宽度 - 伪元素（如
::before）也可能生成不可见但占空间的内容，用开发者工具的“Layout”面板检查scrollWidth > clientWidth的元素
真机测试时滚动卡顿或无法拖拽
Chrome DevTools 的响应式模拟器不能复现 iOS Safari 的滚动机制差异。真机上常见问题包括：
- iOS 微信内置浏览器对
overflow-x: auto支持弱，必须配-webkit-overflow-scrolling: touch - 滚动容器若被
transform、will-change或filter触发合成层，可能拦截 touch 事件 - 父级用了
overscroll-behavior: contain，会阻止滚动事件向上传递，删掉或改用overscroll-behavior: auto - 避免在滚动容器上套多层 flex/grid 布局，尤其是
flex-direction: column里再嵌横向滚动 —— 层级越深，BFC 越难稳定
最稳妥的做法：把横向滚动容器提一层，让它成为 body 直接子元素，减少样式干扰链。复杂布局中，宁可多套一层 <div>，也别赌某条 CSS 规则在所有 WebView 里都生效。</div>
