横向滚动条美化前必须先确保基础滚动生效，需同时满足四条件：父容器设display:flex+flex-wrap:nowrap+overflow-x:auto+overflow-y:hidden、有明确宽度、子项flex-shrink:0、文字内容white-space:nowrap；WebKit内核用::-webkit-scrollbar美化，Firefox需另配scrollbar-width和scrollbar-color。
直接加 overflow-x: auto 不会触发美化滚动条，因为默认滚动条样式由浏览器控制，且 Flex 容器必须先满足「真正溢出」条件，否则连基础滚动条都不会出现。
为什么美化前先得让横向滚动生效
美化滚动条是锦上添花，前提是横向滚动本身能用。常见失败不是样式没写对，而是容器根本没被识别为“可滚动”：
- Flex 子项默认
flex-shrink: 1，内容会被压缩到不溢出，overflow-x: auto形同虚设 -
flex-wrap: wrap（Bootstrap 的d-flex默认不设，但父级或继承样式可能带）会让子项换行，破坏单行滚动前提 - 父容器没明确宽度（比如只写
width: 100%但外层是display: contents或无约束 block），浏览器无法计算“溢出” - 移动端 Safari 需要
-webkit-overflow-scrolling: touch才能激活触控惯性，否则一碰就停、松手回弹
基础滚动必须满足的四个硬性条件
缺一不可，顺序无关，但少一个都会导致滚动条不显示（更别说美化）：
- 父容器：加
display: flex+flex-wrap: nowrap+overflow-x: auto+overflow-y: hidden - 父容器：有明确宽度限制，如
width: 100%、max-width: 600px或被h-100等高度类约束的上下文 - 每个子项：显式设
flex-shrink: 0（推荐，语义清晰）或flex: 0 0 auto（等效但易误设flex-basis） - 子项内含文字时：加
white-space: nowrap，防止内部折行撑高容器、干扰主轴判断
用 ::-webkit-scrollbar 美化横向滚动条
仅 WebKit 内核（Chrome、Edge、Safari）支持，Firefox 不认；不能只写 overflow: auto，必须是 overflow-x: auto 才触发横向伪元素：
.scroll-container {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* iOS 必加 */
}
.scroll-container::-webkit-scrollbar {
height: 8px; /* 横向滚动条高度 */
}
.scroll-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}注意：::-webkit-scrollbar 系列伪元素只作用于设置了 overflow-x: auto 的容器本身，不会继承；若容器是 .d-flex 类，需确保该类没被其他 CSS 覆盖掉 overflow 值。
移动端和旧版 Safari 容易忽略的细节
不是所有“写了就生效”，尤其在 iOS 上：
-
-webkit-overflow-scrolling: touch必须写在同一个选择器里，不能靠继承或后续规则覆盖 - 如果父容器用了
transform（比如translateZ(0)强制硬件加速），某些 iOS 版本会禁用-webkit-overflow-scrolling - 美化后的滚动条在 iOS Safari 中仍可能无惯性——这不是 bug，是系统策略；可加
scroll-behavior: smooth提升体验，但不能替代touch - 不要试图用
overflow: overlay（已废弃），现代方案就是auto+touch+ 伪元素
真正卡住的点往往不在美化代码本身，而在前面四条硬性条件有没有全部满足；尤其是 flex-shrink: 0 和 flex-wrap: nowrap，漏一个，后面全白搭。
