直接给 或 加 overflow-x: auto 无效，因导航元素非格式化上下文边界，且子项默认换行或被 flex 压缩；必须用设 display: flex、overflow-x: auto、white-space: nowrap 的外层容器包裹，并为子项设 flex: 0 0 auto 防压缩。
直接给导航 <nav></nav> 或内部 <ul></ul> 加 overflow-x: auto 大概率不生效——横向导航滚动必须由外层块级容器控制，且子项需脱离文档流默认换行行为。
为什么 overflow-x: auto 加在 <nav></nav> 上经常失效
导航元素（如 <nav></nav>、<ul></ul>）默认是块级，但内部 <li> 会按 normal 流排布，一旦内容宽度不足或文本自动换行，就永远达不到“溢出”条件。更关键的是：若父容器是 Flex/Grid，而你没设 min-width: 0 或 flex-shrink: 0，子项会被压缩，导致滚动条根本不出。
-
<nav></nav>本身不是格式化上下文边界，它不决定溢出检测逻辑；真正起作用的是它的直接父容器 - 常见错误：
<nav style="overflow-x: auto"><ul><li>...</li></ul></nav>—— 滚动条不会出现 - 即使加了
white-space: nowrap，若<ul></ul>是display: block，它仍可能被父级 flex 压缩到 0 宽度
正确结构：外层容器 + Flex 布局 + 子项防缩放
用一个明确尺寸的 <div> 包裹导航，并启用 Flex 布局，是最稳定、语义最清晰的做法。
<ul>
<li>外层容器设：<code>display: flex、flex-wrap: nowrap、overflow-x: auto、overflow-y: hidden
-webkit-overflow-scrolling: touch（iOS Safari 必须，否则拖不动）<li> 或每个导航按钮）设：flex: 0 0 auto（禁拉伸、禁压缩、按内容宽）margin-right 隔开子项；改用 gap: 12px（Flex 容器原生支持，不影响 scroll-snap）scroll-snap-type: x mandatory，子项加 scroll-snap-align: start
文字导航特别注意 white-space 和 width
纯文字导航（比如标签页、筛选项）最容易因换行失败导致无法触发滚动。这不是 CSS 写错了，而是浏览器没“看到”溢出。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 必须在外层容器或
<ul></ul>上加white-space: nowrap，否则<li>内文字一换行，总宽度就塌了 - 不要给
<li>设width: 100%或flex: 1，这会让所有项强行均分，失去“自然宽度 > 容器”的前提 - 如果导航项含图标+文字，确保图标使用
inline-block或display: inline-flex，别用float或position: absolute，否则宽度计算失准 - 验证是否真溢出：选中外层容器，在 Console 执行
el.scrollWidth > el.clientWidth，返回true才说明条件满足
移动端和小屏的隐藏陷阱
横向导航在手机上卡顿、回弹、甚至完全不能拖，往往不是样式问题，而是系统级约束没解除。
- iOS Safari 不加
-webkit-overflow-scrolling: touch→ 拖完立刻回弹，无惯性 - 若整个页面存在横向溢出（比如某个图片没设
max-width: 100%），html { overflow-x: hidden }必须全局加，否则导航容器滚动会受干扰 - 避免在导航容器上写死
min-width: 800px—— 这会让小屏下整个页面横向滚动，而不是仅导航区域 - 动态插入导航项后，若宽度没重算，可临时触发
el.style.transform = 'scale(1)'或el.offsetHeight强制重排
横向导航滚动真正的难点不在“怎么加滚动条”，而在于让浏览器准确识别「内容确实超出了」——这依赖于容器尺寸、子项渲染模式、文本换行策略三者协同。漏掉任意一环，overflow-x: auto 就只是个摆设。
