弹窗内容溢出不滚动的根本原因是外层容器未提供约束空间，需设.modal-overlay为fixed全屏并启用flex居中，同时确保html/body高度为100%，内层用max-height:calc(100vh-120px)配合overflow-y:auto，并添加overscroll-behavior:contain防止滚动穿透。
弹窗内容溢出却不滚动？检查父容器是否提供约束空间
根本原因不是没写 overflow-y: auto，而是外层容器（比如遮罩层 .modal-overlay）没给子元素分配可滚动的“边界”。Flex 布局里，align-items: center 只负责居中，不自动限高；如果父容器没明确高度上下文，.modal-content 就会无限撑开。
必须让外层固定视口占位：
-
.modal-overlay设position: fixed; top: 0; left: 0; right: 0; bottom: 0，再加display: flex; align-items: center; justify-content: center - 同时设
min-height: 100vh; height: 100%（不能只写height: 100vh，iOS Safari 键盘弹出会重算 100vh 导致跳变） - 确保
html和body有height: 100%，否则height: 100%会失效
内层内容区域怎么设 max-height 才不被截断或错位？
max-height 必须配合明确的滚动触发条件，且不能和 height 混用。常见错误是直接给 .modal-content 写 height: 500px 或 height: 100% —— 这会让它脱离 Flex 居中流，还可能在小屏上顶部被切。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 只设
max-height: calc(100vh - 120px)（预留标题、按钮等固定区域），避免硬写80vh - 必须加
overflow-y: auto，且确认父容器（.modal-overlay）没设overflow: hidden - 禁用
height相关值（包括height: fit-content），否则 Flex 不再控制其尺寸 - 加
margin: 0 auto; box-sizing: border-box，防止 padding/border 导致宽度超限进而影响滚动判定
为什么加了 overflow-y: auto 还是滚不动？检查 overscroll-behavior 和滚动穿透
滚动条没出现，有时不是因为没设对 overflow，而是滚动事件被外层“吃掉”了。尤其在 iOS Safari 中，弹窗滚动到底后继续拖拽，会触发背后页面滚动（即滚动穿透），浏览器可能因此抑制内部滚动条的渲染逻辑。
关键修复项：
- 在弹窗根元素（
.modal-overlay或.modal）上加overscroll-behavior: contain - 绝对不要对
body设overflow: hidden来锁背景——这在 iOS 上不可靠，还容易导致键盘唤起时失焦、回弹 - 若必须控制背景滚动，优先改
html样式（如html { position: fixed; top: -${scrollTop}px }），并记录恢复 scrollY - 测试时务必真机打开键盘，输入框聚焦瞬间最容易暴露滚动基准失效问题
Element Plus / Ant Design 等组件库 Dialog 怎么套用这套逻辑？
这些组件默认把整个 Dialog 当作一个块级元素处理，内容区（.el-dialog__body 或 .ant-modal-body）没有独立的高度约束。你不能只改组件类名，得穿透作用域生效。
推荐写法（以 Element Plus 为例）：
- 给 Dialog 加
:class="['custom-modal']"，然后在 CSS 中写.custom-modal .el-dialog__body -
.custom-modal .el-dialog__body设max-height: calc(100vh - 160px); overflow-y: auto - 外层遮罩（
.el-overlay）需额外加overscroll-behavior: contain，否则滚动穿透仍存在 - 禁用组件自带的
append-to-body（若开启），否则样式作用域更难控制
最易被忽略的是：移动端 Safari 下，100vh 在键盘弹出时会被重算为“当前可见视口”，此时仅靠 CSS 无法动态响应——必须搭配 min-height: 100vh; height: 100% 的组合保底，且确保父级 html 高度可用。
