overflow:auto生效的前提是容器有明确高度约束，必须显式设置height或max-height，否则浏览器无法判定溢出；flex子项还需配合min-height:0或flex:0 1 auto才能触发滚动。
直接给容器加 overflow: auto 不一定生效，关键得先让它“有溢出的可能”——也就是必须设明确高度（height 或 max-height），否则浏览器根本不会触发滚动逻辑。
为什么 overflow:auto 没反应
常见现象是写了 overflow: auto，但内容还是直接撑开页面、滚动条死活不出现。根本原因是：容器没被限制尺寸，overflow 在“自适应高度”的元素上完全无效。
-
height或max-height必须显式设置，不能靠min-height或父容器 flex 布局“间接约束”（除非父容器也严格限高） - 如果容器是
display: inline-block或浮动元素，也可能导致高度计算异常 - 对
<table> 直接设 <code>overflow无效，必须用<div> 包裹并设高 <h3>vertical-only 滚动怎么配 overflow-y</h3> <p>只想要纵向滚动、禁掉横向拖动？别只写 <code>overflow-y: auto，漏掉overflow-x会导致 Safari 下意外出现水平滚动条。- 安全写法是成对设置：
overflow-y: auto; overflow-x: hidden; - 用
scroll而非auto时，滚动条会常驻，占位更稳定，适合固定 UI 区域（比如侧边菜单） - 移动端需加
-webkit-overflow-scrolling: touch才有惯性滚动，否则滑动生硬
滚动条样式怎么改又不破坏兼容性
::-webkit-scrollbar只在 Chrome/Safari/Edge 生效，Firefox 和旧 IE 完全无视——所以它只是“锦上添花”，不能作为功能依赖。立即学习“前端免费学习笔记（深入）”；
- 轨道宽度用
width（垂直滚动）或height（水平滚动），别混用 -
background设为透明或浅灰，避免和深色背景打架；border-radius别超过一半宽度，否则圆角失效 - 想全局统一风格？只能用 JS 滚动库（如 SimpleBar），纯 CSS 无法跨浏览器定制
flex 布局里 main 区域滚动怎么稳住头尾
用
flex: 1让中间区域自适应高度时，overflow容易失效，因为 flex 容器默认不设高，子项的“100% 高度”无从计算。- 必须给
body和html加height: 100%，再让 flex 容器继承 -
main元素要设overflow: auto，且不能有margin或padding干扰高度计算（可用box-sizing: border-box防踩坑） - header/footer 固定高度后，
main的flex: 1才真正起作用；否则它会按内容撑开，溢出照旧
最易忽略的一点：滚动是否生效，和内容是否“真超出”强相关。调试时别光看样式，用 DevTools 检查容器实际渲染高度和子元素总高度——差值小于 1px，滚动条也不会出来。
- 安全写法是成对设置：
