overflow-y: auto 不生效主因是容器未设 height/max-height 或非块级元素；需确保内容高度超容器高度，配合 max-height 更安全，ios 需兼容 -webkit-overflow-scrolling: touch。
overflow-y: auto 不生效的常见原因
直接设了 overflow-y: auto 却没滚动条？大概率不是 CSS 写错了，而是容器没“撑开”或没“限高”。overflow 系列属性只对**有明确高度限制且内容超出该高度**的块级元素起作用。
- 父容器没设
height或max-height→ 溢出无参照，滚动条不触发 - 子元素用
display: flex且未设flex-shrink: 0→ 容器可能被内容撑开，实际没溢出 - 元素本身是
inline或inline-block→overflow对非块级元素无效（除非显式设display: block） - 存在
white-space: nowrap或浮动元素干扰布局 → 高度计算异常
必须配合 height / max-height 才能生效
overflow-y: auto 是“条件触发”型属性：只有当内容高度 > 容器高度时，才显示滚动条。它不会主动限制高度，只是响应溢出。
- 用
max-height更安全：允许内容少时自然收缩，多时截断并出滚动条 - 用
height要小心：固定高度下，内容稍多就必然溢出；稍少则底部留白 - 避免用
min-height单独搭配overflow-y：它不限制上限，无法触发溢出逻辑
示例：
.scroll-container {
max-height: 200px;
overflow-y: auto;
}
移动端 Safari 滚动卡顿或不灵敏
iOS Safari 对 overflow-y: auto 的默认行为比较保守，常表现为滚动迟滞、回弹失效或根本拖不动。
- 必须加
-webkit-overflow-scrolling: touch（仅 iOS 7–12，现代版本已弃用但部分旧项目仍需兼容） - 确保容器有
position: relative或transform: translateZ(0)，避免被 GPU 层优化绕过 - 避免在滚动容器内使用
pointer-events: none或嵌套过多will-change - 若用 Vue/React 动态渲染内容，注意首次渲染后 DOM 高度是否已稳定 —— 异步加载后需手动触发重绘（如
el.style.transform = 'translateZ(0)'）
和 overflow-x 的组合陷阱
单独设 overflow-y: auto 时，overflow-x 默认是 visible，但浏览器会自动降级为 auto（尤其当内容同时超宽又超高），导致意外出现水平滚动条。
- 明确重置
overflow-x: hidden，否则长单词、行内元素或表格可能撑破容器宽度 - 若内容含
<table>，记得给 table 加 <code>table-layout: fixed+width: 100%，否则宽度计算不可控 - 使用
overflow: auto替代单设 y 方向，更省心，但会失去“只纵不横”的精确控制
容易被忽略的是：滚动条本身占空间。Chrome 默认显示滚动条（占用约 17px），而 Firefox 可能隐藏它 —— 若依赖精确宽度布局，得用 overflow-y: overlay（仅 WebKit）或 JS 检测并补偿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
