模态框内容溢出无法滚动的根本原因是父级flex容器（.modal-overlay）未提供可滚动的约束空间；需用min-height:100vh;height:100%兼容ios safari视口变化，并确保.modal-content仅设max-height和overflow-y:auto，禁用height。
为什么模态框内容溢出却无法滚动
常见现象是 .modal-content 内容变多后直接撑破视口，遮罩层被顶出屏幕底部，或内容被截断不可见。根本原因不是没写 overflow，而是父级 Flex 容器（.modal-overlay）没给子元素分配「可滚动的约束空间」。
-
height: 100vh在 iOS Safari 中会随地址栏/键盘收放动态变化，导致可用高度突变，max-height失效 -
align-items: center会让子元素按内容高度居中，但不自动限制其最大尺寸；若内容高度 > 可用交叉轴空间，Flex 不会触发滚动，而是溢出 - 只对
.modal-content设max-height: 80vh; overflow-y: auto不够——它需要一个明确的「容器边界」来计算滚动范围，而这个边界必须由父 Flex 容器提供
Fixed + Flex 嵌套结构中 height 和 max-height 的分工
外层 .modal-overlay 负责占满视口并提供居中上下文，内层 .modal-content 负责内容承载与滚动控制。二者不能混用 height，否则破坏 Flex 居中逻辑。
-
.modal-overlay必须用min-height: 100vh; height: 100%组合（非单纯100vh），兼容 iOS Safari 视口重算 -
.modal-content禁止设height（哪怕height: fit-content），否则会脱离 Flex 自动居中流；只用max-width+max-height限定上限 -
max-height推荐用85vh或calc(100vh - 120px)（预留关闭按钮、标题等固定区域），避免硬写80vh导致小屏下顶部被切 - 必须加
overflow-y: auto，且确保父容器（.modal-overlay）没有overflow: hidden干扰
移动端 Safari 滚动错位的真实诱因与修复
不是 CSS 写错了，而是 100vh 在键盘弹出时被 Safari 重算为「当前可见视口高度」，导致 .modal-overlay 高度骤减，.modal-content 的 max-height 基准失效，滚动条位置跳变。
- 不要监听
resize后强行改document.documentElement.style.height——这会引发重排，且在某些 iOS 版本中不可靠 - 改用
min-height: 100vh; height: 100%是最轻量解法：当100vh缩小时，min-height保底，height: 100%会继承父html的实际高度（需确保html有height: 100%） - 额外加固：给
.modal-content加margin: 0 auto和box-sizing: border-box，防止 padding/border 导致宽度超限进而影响滚动判定 - 测试时务必在真机上打开键盘输入框，模拟用户真实操作路径
容易被忽略的滚动体验细节
即使高度和滚动都配置正确，用户仍可能遇到「点不到滚动条」「滚到一半卡住」「背景页跟着动」等问题，根源在层级与行为隔离没做干净。
- 打开模态框时，必须用 JS 给
body加class="modal-open"，并配body.modal-open { overflow: hidden; }，否则背景滚动会干扰模态框滚动惯性 -
.modal-content内部若含textarea或input，聚焦时 iOS 会强制滚动整个视口，需在focus事件中调用element.scrollIntoView({ block: 'nearest' })局部修正 - 不要依赖
touch-action: manipulation来优化触摸响应——它可能禁用滚动，尤其在嵌套overflow区域内 - 如果模态框支持拖拽调整位置，
dragstart事件里要临时移除body的overflow: hidden，否则拖拽过程会卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
