模态框居中后无法滚动的根本原因是父容器未提供高度约束，导致子项缺乏可滚动的计算空间；需设.modal-overlay为min-height: 100vh; height: 100%，并确保html、body为height: 100%，.modal-content仅用max-height配合overflow-y: auto。
模态框能居中，但内容一多就撑破视口或滚动失效——问题不在 align-items: center 没写对，而在于父容器没给 Flex 子项留出「可滚动的计算空间」。
为什么 align-items: center 居中了却不能滚动
常见现象是内容变长后，.modal-content 直接顶出屏幕底部，或者顶部被切掉、滚动条不出现。根本原因不是漏写了 overflow-y: auto，而是外层 .modal-overlay 虽然用了 display: flex，但没提供明确的高度约束，导致内层无法基于「可用高度」计算 max-height。
-
height: 100vh在 iOS Safari 中会随键盘/地址栏收放突变，max-height: 80vh失效 -
align-items: center只控制对齐，不控制尺寸上限；内容高过交叉轴可用空间时，Flex 不自动截断或滚动，而是溢出 - 如果给
.modal-content加了height: 100%或height: fit-content，它会脱离 Flex 的弹性流，居中逻辑和滚动行为同时崩坏
.modal-overlay 必须用 min-height: 100vh; height: 100%
这是兼容 iOS Safari 视口重算的关键组合，单写 100vh 或 100% 都不行。
-
min-height: 100vh确保初始至少占满视口 -
height: 100%让它在视口缩小时（如键盘弹出）能跟随父级（html/body）动态回退，避免高度骤降 - 必须确保
html和body也设了height: 100%，否则100%无参照 - 禁用
overflow: hidden—— 它会直接屏蔽子元素的滚动请求
.modal-content 只能设 max-height，不能设 height
设 height 会锁死尺寸，破坏 Flex 的居中弹性；设 max-height 才能兼顾「内容少时紧凑居中、内容多时滚动」。
- 推荐用
max-height: calc(100vh - 120px)，预留标题、按钮等固定区域，比硬写85vh更可靠 - 必须配
overflow-y: auto，且只作用于.modal-content自身 -
width和max-width可按需设，但不要用height、min-height或flex: 1（后者在非 Flex 子容器里无效，在 Flex 里又容易抢高度） - 如果内容含表单或输入框，iOS 上需加
-webkit-overflow-scrolling: touch保滚动顺滑
移动端 Safari 滚动错位的修复点
不是 CSS 写错了，是 100vh 基准被 Safari 动态重算后，.modal-content 的 max-height 失去依据，导致滚动位置跳变。
- 用
min-height: 100vh; height: 100%替代height: 100vh是最轻量的解法 - 避免在
.modal-overlay上监听resize手动重设高度——触发频繁、易抖动 - 若需更稳，可监听
focusin和blur事件，在输入框聚焦时临时把.modal-overlay的height切成auto，失焦再切回，但多数场景没必要
真正卡住人的从来不是「怎么居中」，而是「怎么让居中后的容器还知道该在哪停、在哪滚」——min-height 和 max-height 的分工，得在 Flex 嵌套里一层一层对上号，漏掉任意一环，滚动就静音了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
