Modal弹窗高度失控的根源在于Bootstrap 5的flex布局导致.modal-body无高度限制，正确解法是仅设置.modal-body的max-height（如60vh）并配overflow-y:auto及-webkit-overflow-scrolling:touch。
Modal 弹窗高度失控的典型表现
内容一多，.modal-body 撑开整个视口、滚动条不出现、点击遮罩层无法关闭、移动端 Safari 完全卡死——这不是你代码写错了，而是 Bootstrap 5 默认的弹性布局把高度计算绕晕了。.modal-dialog 是 display: flex，.modal-content 没设高度上限，导致子元素（尤其是 .modal-body）直接“顶破天花板”。
只改 .modal-body 的 max-height 才可靠
别碰 .modal-dialog 或 .modal-content 的 height / max-height：前者会破坏居中逻辑，后者在 flex 布局下常被忽略。正确路径是锁定 .modal-body：
-
max-height: 60vh（推荐起始值，适配多数桌面场景） - 必须配
overflow-y: auto，否则滚动不会触发 - 移动端 Safari 需额外加
-webkit-overflow-scrolling: touch，否则滑动生涩或失效 - 如果弹窗含表单且需键盘唤起，
max-height建议不低于50vh，避免 iOS 键盘顶飞内容
modal-lg / modal-sm 对高度的影响很有限
这两个类只调整 .modal-dialog 的宽度（max-width），对高度无任何控制作用。它们甚至可能让问题更隐蔽：大尺寸容器下内容撑得更开，反而更容易突破视口。真正影响高度感知的是：
-
.modal-dialog-centered：仅改变定位方式，不影响高度计算 - 是否手动设置
.modal-body的max-height：这是唯一可控杠杆 - 父级是否有
min-height或height: 100%干扰：常见于 Vue/React 路由容器，会传导到模态层
Vue/React 中动态 Modal 的高度陷阱
把整个 <div class="modal"> 放进 <code>v-for 或 map() 渲染，会导致多个模态框 DOM 共存。即使只显示一个，浏览器仍会为所有 .modal-body 计算高度，容易引发重排抖动、滚动错位、甚至 Safari 下的无限闪退。解决方案很实在：
- 全局只保留一个
<div class="modal">，放在 App 根节点下（非组件内部） <li>用状态变量（如 <code>currentModalData）驱动.modal-body内容更新 - 避免对
.modal元素做transform、scale等 CSS 动画——它和.modal-dialog的transform居中逻辑冲突，直接导致高度计算异常
高度控制本质不是“设个 height 就完事”，而是理清 Bootstrap 5 的 flex 布局链路：从 .modal → .modal-dialog → .modal-content → .modal-body，只有最后一环能安全施加约束。其他位置动了，大概率是在给浏览器出难题。
