加了 overflow-x: auto 仍无滚动条，根本原因是 Flex 子项被默认 flex-shrink: 1 压缩、flex-wrap: wrap 换行或父容器缺宽度限制；必须同时设置 flex-wrap: nowrap、子项 flex-shrink: 0、父容器明确宽度及 overflow-x: auto + overflow-y: hidden。
为什么加了 overflow-x: auto 还没滚动条
flex 容器默认不触发横向滚动，常见原因有三个：子项被压缩（flex-shrink: 1）、自动换行（flex-wrap: wrap）、或容器本身没宽度限制。浏览器只有在「内容总宽 > 容器可用宽」且「不允许收缩/换行」时，才认为“溢出”成立。
必须同时满足：
-
overflow-x: auto和overflow-y: hidden写在父容器上（不能只写overflow: auto，否则可能纵轴也滚） - 父容器设
display: flex+flex-wrap: nowrap - 所有子项设
flex-shrink: 0（否则 Flex 会主动压缩它们来塞进容器） - 父容器有明确宽度限制（如
width: 100%、max-width: 600px，或被 block 父级约束）
d-flex 类加了但横向滚动不生效
Bootstrap 的 d-flex 只是 display: flex 的快捷类，它不带 flex-wrap 或 overflow 行为。直接在元素上写 class="d-flex overflow-x-auto" 往往无效，因为：
-
overflow-x-auto是 Bootstrap 5 新增类，BS4 不支持，需手动写 CSS 或升级 - BS4 中必须用
class="d-flex"+ 自定义样式：style="overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;" - 子项若用了
col或flex-fill，会触发弹性拉伸/压缩，破坏横向滚动前提 - 移动端 Safari 需额外加
-webkit-overflow-scrolling: touch才能顺滑拖拽
卡片/导航/Tab 等常见场景怎么套用
不同组件结构差异大，滚动容器必须是「直接包裹子项的那层」，不能跳级。比如：
- 卡片横向滚动：外层
<div class="d-flex flex-nowrap overflow-x-auto p-2">，每个 <code><div class="card me-3" style="min-width: 180px;"> —— <code>min-width防止压缩变形 - 导航栏（
.nav）：必须包一层<div class="nav-container">，再设 <code>overflow-x: auto；.nav自身加display: inline-flex+flex-wrap: nowrap，每个.nav-item加flex-shrink: 0 - Tab 标签页：同上，但要禁用
white-space: nowrap被覆盖，且 iOS 下必须加-webkit-overflow-scrolling: touch - 必须给滚动容器加
-webkit-overflow-scrolling: touch（仅旧版 Safari 有效，但仍有大量存量设备依赖它） - 避免滚动容器嵌套在
display: flex或display: grid的父元素里——这些布局可能截断滚动事件流 - 检查父级是否设了
overflow: hidden或overscroll-behavior-x: contain，它们会静默禁用子滚动 - 如果仍卡顿，说明内容重绘压力大，可加
scroll-behavior: smooth或改用轻量库如iScroll，但别初始化在$(document).ready()里，等字体加载完再调用
移动端滑不动或回弹严重
这不是代码漏写，而是浏览器滚动策略限制。iOS Safari 和部分安卓 WebView 默认禁止原生 overflow-x: auto 的触屏拖拽惯性，表现为一碰就停、松手回弹、甚至触发页面整体滚动。
真正容易被忽略的是：滚动行为是否被某一层祖先容器悄悄拦截了。DevTools 里逐级往上查 computed styles，重点盯 overflow-x、overscroll-behavior、display 这三项，比反复调 flex 参数更高效。
