overflow-x: hidden加在body上常失效，因横向滚动根源在html根节点或子元素盒模型失控；iOS Safari中body被截断但html仍可拖动，且未设box-sizing: border-box时padding/border累加导致溢出。
为什么 overflow-x: hidden 加在 body 上经常失效
因为横向滚动的源头不在 body，而在 html 根节点或子元素盒模型失控。iOS Safari 下，body 溢出被截断，但 html 仍可被拖动；更常见的是，* { box-sizing: border-box } 没加在最顶部，导致 padding/border 累加后超出视口。例如父容器 padding: 16px，子元素 width: 100%，实际宽度就是 100% + 32px。
必须同时设：
html, body { overflow-x: hidden; margin: 0; }-
* { box-sizing: border-box; }—— 放在所有 CSS 最前面 - 检查 computed 样式里
offsetWidth > clientWidth的元素，尤其是::before/::after伪元素带大尺寸content的情况
图片、视频、iframe 这些“撑宽惯犯”怎么约束
它们是替换元素，默认不响应 width: 100% 的弹性缩放，原始尺寸超宽就直接突破容器。用 max-width: 100% 才安全，且要配 height: auto 防止变形。
统一加这条规则即可覆盖绝大多数场景：
立即学习“前端免费学习笔记（深入）”；
img, video, iframe, embed, object {
max-width: 100%;
height: auto;
}特别注意：table 不能直接加 overflow-x: auto，必须用 div 包裹，并设 min-width: fit-content 和 table-layout: fixed，否则 iOS 下拖不动。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
Flex/Grid 容器里 overflow-x: hidden 为啥不拦不住滚动
因为 Flex/Grid 默认 min-width: auto，子项若有 white-space: nowrap 或固定宽（比如 flex-shrink: 0），父容器拒绝收缩，overflow-x: hidden 就形同虚设。
修复方式很简单：
- Flex 容器加
min-width: 0 - Grid 容器加
min-inline-size: 0 - 别只写
overflow-x: hidden，配套写全overflow: hidden或显式声明overflow-y: hidden
错误写法：.list { display: flex; overflow-x: hidden; } → 缺 min-width: 0，滚动照常出现。
移动端 touch-action 和 viewport 怎么避开 Safari 冲突
iOS Safari 对 overflow-x: hidden 更敏感，且容易和手势控制打架，导致“看不见但能拖动”的伪滚动。根本解法不是加更多 CSS，而是避免触发它的弹性滚动机制。
关键点：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是底线，不要加maximum-scale=1.0或user-scalable=no（除非已通过无障碍评估） - 禁用
body { touch-action: pan-y }—— 它会干扰默认滚动行为，截至 2026 年 10 月仍存在兼容问题 - 若局部区域仍可拖，需在容器上监听
touchmove并event.preventDefault()，且必须传{ passive: false }
最易忽略的是：调试时临时加 outline: 1px solid red 到 body，一眼就能看出哪块内容真超出了视口边界 —— 很多时候问题不在滚动设置，而在某个没被注意到的绝对定位元素或伪元素。
