移动端 overflow-y: auto 不滚动，90% 是因容器缺高度约束或被 flex 布局撑满；需设 max-height/height、flex 下加 min-height: 0，并在 ios safari 中配 -webkit-overflow-scrolling: touch。
移动端加了 overflow-y: auto 却不滚动，90% 是因为容器没“高度约束”或被 Flex 布局悄悄撑满——不是 CSS 写错了，是浏览器根本判断不出“哪里溢出了”。
为什么 overflow-y: auto 在移动端经常静默失效
它不是“不工作”，而是条件不满足：浏览器必须知道容器的**可滚动边界**在哪里。常见断点包括：
- 容器只设了
min-height，没设height或max-height—— 浏览器无法判定“多高才算溢出” - 父容器是
display: flex，子项默认align-items: stretch，把滚动区域拉满高度，内容再长也“不溢出” - 滚动区域用了
position: fixed或嵌套在transform元素里，iOS Safari 会丢掉滚动上下文 - 忘了加
-webkit-overflow-scrolling: touch（iOS Safari 仍需它激活惯性滚动）
overflow-y: auto 必须搭配的尺寸控制方式
仅写 overflow-y: auto 不够，得明确告诉浏览器“这个区域最多能占多高”。优先级从高到低：
-
max-height: 300px（推荐）：比height更灵活，内容少时不浪费空间 -
height: 300px：适合固定高度场景，但内容少时留白明显 - Flex 场景下，滚动子项必须加
min-height: 0（否则 stretch 行为阻止溢出判定） - 若父容器是
flex: 1，子项需同时设flex: 0 1 auto+min-height: 0
-webkit-overflow-scrolling: touch 还要不要加
截至 2026 年中，它仍是 iOS Safari 的事实标准，但有严格使用前提：
- 只对 WebKit 内核生效（Safari、老版 Chrome），Firefox 和新版 Edge 完全忽略
- 必须和
overflow-y: auto或overflow: auto同时存在才起作用 - 不能用在
position: fixed元素内部——滚动事件会被截断，表现为“能滑但不动” - 若滚动区含
will-change: transform或transform: translateZ(0)，部分 iOS 16–17 版本会闪屏，建议降级为overflow-y: scroll+ 固定max-height兜底
滚动条视觉隐藏但功能保留的稳妥写法
想隐藏滚动条又不让用户找不到可滚动区域，得兼顾 WebKit 和 Firefox：
- WebKit（Safari/Chrome）：
::-webkit-scrollbar { width: 0; height: 0; } - Firefox：
scrollbar-width: none; - 别用
background: transparent给::-webkit-scrollbar-thumb，某些 iOS 版本直接不渲染滑块 - 如果需要 hover 显形，用
.container:hover::-webkit-scrollbar { width: 8px; }，但注意 Android Chrome 不支持 hover
最易被忽略的点：动态内容（比如 JS 拼接的列表）插入后，overflow-y: auto 会自动响应，但若容器本身由 JS 动态设高（如 style.height = 'auto'），就破坏了高度约束——此时必须重设 max-height 或触发重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
