body { overflow-x: hidden } 在移动端无效，因 Safari 不将 body 视为裁剪容器，溢出由嵌套更深的子容器（如 #panels-container）引发，需在最靠近溢出源且具明确宽度的父容器（如 #panels）上设置 overflow-x: auto 或 hidden，并配合 width、min-width: 0 等属性确保 BFC。
body { overflow-x: hidden } 为什么在手机上不管用
因为 overflow-x 只对**直接子元素**生效，而移动端真正撑宽页面的往往不是 body 的一级子元素（比如 <main></main>），而是嵌套更深的容器（如 #panels-container）。body 设置了 overflow-x: hidden，但它的子元素没创建 BFC，溢出就“漏”出去了。
常见错误现象：桌面端正常，iOS Safari 或微信内置浏览器仍可左右拖拽；Chrome DevTools 模拟器里也滚动不了——这不是属性失效，是裁剪作用域错了。
- 必须把
overflow-x: hidden或overflow-x: auto加在**最靠近溢出源的、有明确宽度边界的父容器**上（比如#panels） - 该容器需满足：显式设
width: 100%、不被float/position: absolute破坏 BFC、避免display: inline-block - 务必检查
<meta name="viewport">是否存在且未被覆盖，否则缩放逻辑会干扰宽度计算
表格横向滚动不出现？先看这三行 CSS
给 <table> 直接加 overflow-x: auto 没用——表格默认会无限撑宽，滚动必须由外层容器接管。
- 外层
<div>必须设：overflow-x: auto+width: 100%（不能是 flex item 里没约束的 width） -
<table>要加：table-layout: fixed+min-width: fit-content（或固定值如min-width: 600px） - 所有
<td>和<th>都要加：white-space: nowrap，否则文本换行会让宽度计算失效 - iOS Safari 还得加：
-webkit-overflow-scrolling: touch，否则拖不动
Flex 容器里做横向滑动 Tab，flex: 0 0 auto 是关键
用 display: flex 做横向滚动菜单时，子项被压缩是滚动失效的头号原因。
立即学习“前端免费学习笔记（深入）”；
- 父容器设：
display: flex+overflow-x: auto+-webkit-overflow-scrolling: touch - 每个子项（如
.tab-item）必须设：flex: 0 0 auto（禁止缩放 + 宽度由内容决定） - 禁用
flex-wrap，确保所有项强制排成一行 - 如果父容器在 flex 布局里，它自身可能被压缩，需额外加
min-width: 0
overflow-x: hidden 失效？先用 outline 找出真凶
加了 overflow-x: hidden 还有滚动条，说明有元素“偷偷撑宽”了布局。别猜，用 CSS 快速定位：
- 在开发者工具控制台执行：
document.querySelectorAll('*').forEach(el => el.style.outline = '1px solid red')，立刻看到哪个元素越界 - 高频溢出源：
img缺max-width: 100%、pre或长链接没设word-break: break-word、绝对定位元素 left/right 值过大 - 全局预防：项目初始化时加重置：
*, *::before, *::after { box-sizing: border-box; }+img { max-width: 100%; height: auto; }
横向滚动问题从来不是单个 CSS 属性能解决的，它本质是宽度链路上某一处失控。盯住溢出源、锁死裁剪锚点、绕过移动端渲染陷阱，比堆 overflow-x: hidden 有效得多。
