根本原因是只设max-height未设overflow-y: auto；需配合max-height: 60dvh和-webkit-overflow-scrolling: touch，并作用于内容区而非弹窗容器，同时避免父级transform或overflow:hidden干扰。
弹窗内容在小屏被截断，加了max-height却没滚动条？
根本原因是只设了max-height但漏掉了overflow-y: auto。CSS 中max-height只是上限，不自动触发滚动；超出部分默认被裁剪（overflow: hidden 的初始行为）。必须显式声明滚动策略。
-
max-height: 60vh比固定像素更可靠，适配不同设备高度 - 搭配
overflow-y: auto，而非scroll——前者只在需要时显示滚动条，后者始终显示（iOS 上还可能多占空间） - 避免对弹窗容器设
height: 100%或flex: 1，它们会和max-height冲突，尤其在position: absolute场景下常失效
为什么 iOS 小屏上滚动条看不见，或滚动卡顿？
iOS Safari 默认隐藏原生滚动条，且对overflow-y: auto的触控响应较弱。这不是 bug，是系统级交互策略。
- 加
-webkit-overflow-scrolling: touch（仅需在 iOS 15 及以下必要；iOS 16+ 已基本修复，但保留无害） - 不要依赖
::-webkit-scrollbar强行显示滚动条——真机上多数无效，且破坏触感 - 确保弹窗父级没意外设置
transform、will-change或overflow: hidden，这些会创建新层叠上下文，导致滚动区域被截断
用vh单位设max-height时，状态栏/地址栏遮挡怎么办？
移动端浏览器的地址栏收放会动态改变vh值（比如从 100vh → 105vh），导致弹窗突然撑高或收缩，视觉跳动。
- 优先用
max-height: 60dvh（dynamic viewport height），2023 年起主流浏览器已支持，它随地址栏状态实时更新 - 若需兼容老版本，可 fallback：
max-height: 60vh; max-height: 60dvh;（后声明者覆盖前声明者） - 慎用
100dvh——它会让弹窗顶到视口最顶部，但底部按钮可能被键盘顶出屏幕，建议上限控制在70dvh以内
Element UI 或 Ant Design 弹窗里max-height不生效？
这类组件库通常把内容区包裹在独立节点（如.el-dialog__body）中，直接对.el-dialog设max-height无效——它只约束整个弹窗框，不约束内部滚动区域。
- 目标必须是内容区：例如 Element UI 要写
.el-dialog__body { max-height: 60vh; overflow-y: auto; } - Ant Design 对应的是
.ant-modal-body；Shiny 的modalDialog需用.modal-body - 如果内容区有
padding，记得从max-height中预留空间，或改用calc(60vh - 32px)（32px 为上下 padding 总和）
真正容易被忽略的，是滚动区域的“起点”是否干净——很多问题不是max-height设错了，而是弹窗被套在某个transform或overflow: hidden的父容器里，导致滚动容器本身就被截断了。先检查 DOM 层级和父元素样式，再调高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
