局部横向滚动不生效，八成是容器未设明确宽度约束；必须配合display:flex、flex-wrap:nowrap、子项flex:0 0 auto及overflow-x:auto，缺一不可。

局部横向滚动不生效，八成是容器没“锁住”宽度

只加 overflow-x: auto 几乎肯定无效——它不是开关，而是“溢出后才启用”的触发器。浏览器必须先确认“内容真的超出了”，而这个判断依赖容器有明确的横轴约束。

常见失效场景：

• 父容器没设 width 或 max-width（比如只写 width: 100%，但上层是 display: contents 或无宽 flex 项）
• 容器用了 display: inline-block 或未设 flex-shrink: 0，被压缩到刚好容纳子项
• 子项用了 white-space: nowrap 却没配 flex: 0 0 auto，导致高度崩坏、换行错位

Flex 布局下横向滚动的最小可靠写法

这不是属性堆砌，而是堵住每个泄漏点的组合：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 容器必须设 display: flex + flex-wrap: nowrap（强制子项死扛一行）
• 容器要有明确宽度：用 width: 100%（且父级必须有宽）、max-width: 600px 或具体像素值
• 每个子项设 flex: 0 0 auto（禁止缩放、禁止换行、宽度由内容定）
• 显式加 overflow-y: hidden，避免 macOS/iOS 触控时双轴滚动条干扰
• 移动端必加 -webkit-overflow-scrolling: touch，否则 iOS Safari 滑不动或卡顿

怎么隐藏滚动条但保留滑动能力

删掉 overflow-x: auto 就等于废掉滚动——隐藏的是视觉组件，不是滚动能力本身。

立即学习“前端免费学习笔记（深入）”；

• WebKit 内核（Chrome/Safari/Edge）用 ::-webkit-scrollbar { display: none; }
• Firefox 不支持该伪元素，但可接受无滚动条下的 touch 滑动，无需额外处理
• 若要物理遮挡（如防止悬停闪现），可用 margin-bottom: -16px 盖住滚动条区域，但会损害可访问性，慎用

scroll-snap-type 吸附对齐为什么没反应

吸附不是加了就生效，它有两个硬性前提必须同时满足：

• 容器必须用 overflow-x: scroll（不是 auto），否则 Safari 等浏览器不启用 snap 上下文
• 子项必须严格等宽，或统一用 flex: 0 0 auto 保证左对齐基准一致；若子项宽度由内容浮动变化，吸附会完全失准
• 吸附方向需匹配：横向滚动必须设 scroll-snap-type: x mandatory，写成 y 或漏掉 mandatory 都无效

滚动条是否显示、是否能吸附、是否响应 touch，全取决于布局前提是否扎实。最容易被忽略的，是把 overflow-x: auto 当作独立功能来用，而忘了它只是“结果”，不是“原因”。