移动端横向滚动条失效的根本原因是溢出裁剪未作用于真正撑宽的元素，必须给最靠近溢出源且具备明确边界的父容器（如 #panels-container 的直接父级 #panels）设置 overflow-x: hidden 或 auto，而非依赖 body；body 不是布局裁剪锚点，无法兜底嵌套结构中的溢出。
移动端横向滚动条不是 overflow-x: hidden 没生效，而是它根本没起作用——因为裁剪点设错了位置。
为什么 body { overflow-x: hidden } 在移动端无效
浏览器只对「直接子元素」做溢出裁剪，而真正撑宽的元素（比如 #panels-container）往往嵌套多层。如果它的父容器 #panels 没设 overflow-x，body 的设置就会被绕过。iOS Safari 和部分 Android WebView 尤其明显，它们会把溢出“透传”到视口。
-
body是语义根容器，不是布局裁剪锚点，别指望它兜底 - 常见干扰：父容器用了
float、position: absolute或display: inline-block，导致 BFC 失效 - 必须显式给最靠近溢出源的、有明确边界的父容器加
overflow-x: hidden或auto
表格横向滚动不出现？外层容器没设对
直接给 <table> 加 <code>overflow-x: auto 永远无效——table 会自动撑宽，滚动行为必须由外部容器承载。
- 包裹
<table> 的 <code><div> 必须设 <code>overflow-x: auto和明确宽度（如width: 100%） <table> 自身加 <code>white-space: nowrap防文本换行干扰宽度计算- iOS Safari 需要
-webkit-overflow-scrolling: touch启用原生滚动惯性 - 避免在滚动容器上用
transform、will-change，否则可能拦截 touch 事件 -
-ml-44这类负边距在小屏下会把内容左移出界，改用translate-x更安全 -
<img>必须加max-w-full或w-full，否则原始尺寸直接撑宽 - Flex 容器里子项没设
min-w-0，长文本或图标会强制撑开容器 - 用 Chrome DevTools 的「Highlight overflows」功能逐层检查，红框标出的就是溢出源
Tailwind 中右侧黑边/滚动条？检查负 margin 和图片尺寸
黑边本质是 body 宽度 > 100vw，浏览器被迫渲染超出区域——背景色露出来了，不是样式问题，是布局溢出。
真正的难点不在写哪一行 CSS，而在定位哪个父容器才是裁剪边界——它必须离溢出元素最近、有明确尺寸、且未被 float/absolute 破坏 BFC。真机测试比模拟器更早暴露问题，尤其 iOS Safari 的滚动链路和裁剪逻辑跟桌面完全不同。
