唯一有效解法是给.modal-body设max-height（如calc(100dvh - 140px)）和overflow-y: auto，并加-webkit-overflow-scrolling: touch修复iOS卡顿；改.modal-dialog的max-height无效，因其为flex容器，高度由子项撑开。
直接改 .modal-dialog 的 max-height 无效
Bootstrap 5 的 .modal-dialog 默认是 display: flex，它的高度由子元素撑开，不是靠自身 max-height 控制的。你给它设 max-height: 600px，浏览器会忽略——因为 flex 容器的高度约束不作用于自身，而是作用于子项（即 .modal-content）。
真正生效的位置是 .modal-body
模态框高度失控的本质，是 .modal-body 没被限制，导致它无限制撑高整个 .modal-content，滚动条跑到了页面 body 上。唯一稳定、可预测的控制点就是 .modal-body：
-
max-height必须设在.modal-body上，推荐起始值：max-height: calc(100dvh - 140px)（140px 是 header + footer + padding 的常见总和，按实际结构调整） - 必须配
overflow-y: auto，否则滚动不会触发 - 移动端 Safari 需加
-webkit-overflow-scrolling: touch，否则滑动卡顿或失效 - 避免写
height: 100%或min-height在.modal-body上——它的父级.modal-content没设高度，100%会算成 0
为什么用 100dvh 而不是 100vh
100vh 在移动端 Safari 中有严重缺陷：地址栏展开/收起时，视口高度动态变化，vh 值跳变，导致 .modal-body 高度突然收缩或拉伸，内容错位甚至滚动条消失。而 100dvh（dynamic viewport height）是 2023 年后标准，能响应式适配地址栏状态，2026 年已全平台广泛支持。
如果需兼容极老 Android WebView（max-height: min(100dvh, 100vh)，但绝大多数项目可放心只用 100dvh。
别碰 .modal-content 的 height 或 max-height
有人试图给 .modal-content 加 height: 100dvh 来“撑满”，这会引发连锁问题：
-
.modal-content有默认padding: 1rem，100dvh减去 padding 后，.modal-body可用空间变小，长内容反而更早溢出 - 若含
.modal-header和.modal-footer，它们会进一步压缩.modal-body的空间，且无法动态计算 -
overflow: hidden不能加在.modal-content上——会裁掉阴影、圆角，关闭按钮可能被遮挡
真正可控的路径只有一条：让 .modal-content 自然高度，把所有高度约束压到 .modal-body 上，并确保其父链没有 min-height、height 或 overflow 干扰（尤其注意 Vue/React 路由容器常带 min-height: 100%，会传导下来）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
