overflow: auto 仅在内容真正溢出容器时显示滚动条；与 overflow: scroll 强制显示不同，其触发受 white-space、浮动、flex 项目 min-width/min-height 等影响，且移动端需 -webkit-overflow-scrolling: touch 等兼容处理。
overflow: auto 什么时候会显示滚动条
它只在内容真正溢出容器时才出现滚动条，不是默认一直显示。这点和 overflow: scroll 不同——后者不管有没有溢出，横向纵向滚动条都强制存在。
常见误判是：给一个 div 设了固定宽高和 overflow: auto，但里面文字没换行、图片超宽，结果滚动条不出现。原因往往是内容没被浏览器判定为“溢出”，比如：
- 文本未设置
white-space: nowrap或容器未限制内联元素宽度 - 子元素用了
display: inline-block或浮动，脱离文档流后高度塌陷，导致父容器实际高度不够触发溢出 - Flex 或 Grid 容器中子项未设
min-width: 0/min-height: 0，导致内容拉伸容器而非被截断
为什么 overflow: auto 在 Flex 容器里经常失效
Flex 项目默认有 min-width: auto（行内方向）和 min-height: auto（块方向），这会让内容优先撑开容器，而不是触发溢出。解决方法很简单：
给需要滚动的子项加 min-width: 0（水平滚动）或 min-height: 0（垂直滚动）。
.flex-container {
display: flex;
}
.scrollable-item {
overflow: auto;
min-width: 0; /* 关键：允许内容被截断 */
}
不加这句，哪怕内容明显超出，overflow: auto 也大概率静默失效。
移动端 touch 滚动卡顿或无法滑动怎么办
原生 overflow: auto 在 iOS Safari 和部分 Android 浏览器上，默认不支持手指惯性滚动（即滑一下就停，不能甩）。必须显式开启：
- 加
-webkit-overflow-scrolling: touch（仅 Safari 旧版必需，iOS 14+ 已逐步弃用但仍有兼容价值） - 确保容器有明确的
height或max-height，不能依赖flex: 1等弹性值（某些安卓 WebView 会计算失败） - 避免在滚动区域上层叠加
pointer-events: none或透明遮罩，会拦截 touch 事件
现代方案更推荐用 overscroll-behavior: contain 配合 scroll-behavior: smooth 控制行为，但基础滚动仍依赖上述条件。
滚动条样式怎么改又不影响功能
WebKit 内核（Chrome/Safari）支持伪元素定制，但仅限 ::-webkit-scrollbar 系列，且必须配合 overflow: auto 或 scroll 才生效。
关键点：
- 必须写全链路：
::-webkit-scrollbar+::-webkit-scrollbar-track+::-webkit-scrollbar-thumb -
width/height只对对应方向生效（横向滚动条用height） - Firefox 用
scrollbar-width和scrollbar-color，但仅控制粗细和颜色，不支持圆角/阴影等 - 不要试图用
display: none隐藏滚动条——会同时禁用滚动能力；要用width: 0+opacity: 0等方式“视觉隐藏”
最易忽略的是：自定义滚动条后，若容器尺寸动态变化（如展开折叠），需手动触发重绘，否则新内容可能无滚动响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
