只给 .modal-body 设 max-height 和 overflow-y: auto 才有效，因其是语义唯一内容容器且父级 flex 布局截断滚动上下文；必须配 -webkit-overflow-scrolling: touch 修复 ios 卡顿，并确保 header/footer 不在 body 内。
只给 .modal-body 设 max-height 和 overflow-y: auto 才有效
Bootstrap 的 .modal-dialog 默认是 display: flex，而 .modal-content 没有高度限制，整个模态框会随内容撑开——滚动行为被父级弹性布局“截断”。你给 .modal 或 .modal-content 加 overflow-y: auto，浏览器压根不触发滚动，因为它们没形成有边界的滚动容器。
只有 .modal-body 是语义上唯一该承载长内容的区域，也是 Bootstrap 5 官方文档明确推荐控制滚动的地方。其他位置加样式基本无效，甚至破坏垂直居中和响应式缩放。
-
max-height必须用（别用height，小屏会被裁切），推荐70vh或calc(100vh - 216px)（预留 header/footer 空间） -
overflow-y: auto要配对使用（scroll会强制显示滚动条，干扰视觉） - 确保
.modal-header和.modal-footer不在.modal-body内，否则也会被卷进去
modal-dialog-scrollable 类为什么加了还不滚动？
这个类只“启用滚动逻辑”，不是“开箱即用的滚动”。它在 Bootstrap 5.2+ 中默认给 .modal-body 加了 max-height: 60vh 和 overflow-y: auto，但这个值在表单、富文本或小屏设备上极易不够用。
常见破坏场景：
- 父级
.modal-content或.modal-dialog被外部 CSS 设了height: 100%或flex: 1，导致子元素无法继承有效高度 -
.modal-body里用了display: flex; flex-direction: column，但子容器没设flex: 1，高度塌陷 - 嵌套了
position: absolute元素，脱离文档流，干扰 height 计算
建议显式覆盖：<div class="modal-body" style="max-height: 75vh; overflow-y: auto;">
<h3>iOS Safari 滚不动？必须加 <code>-webkit-overflow-scrolling: touch
iOS Safari 对 flex 容器内的滚动支持弱，即使 .modal-body 高度超限、overflow-y: auto 也设了，滚动仍卡顿或无惯性。这不是 bug，是 WebKit 渲染限制。
必须三者同时存在才可靠：
-
max-height（如70vh） overflow-y: auto-webkit-overflow-scrolling: touch
示例写法：<div class="modal-body" style="max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;">
<h3>滚动后点不到 backdrop 关闭模态框？这不是滚动的问题</h3>
<p>这是 <code>z-index 错乱的典型副作用。当 .modal-body 内某个元素（比如富文本编辑器、下拉菜单、autofocus 输入框）获得焦点，JS 可能临时提升它的 z-index，盖住 .modal-backdrop（默认 z-index: 1040）。
排查要点：
- 检查是否对
.modal-body或其子元素写了position: relative+z-index，删掉 - 确认第三方组件（如
vue-select、quill、flatpickr）初始化后没偷偷改z-index - 确保
.modal-backdrop的z-index始终高于所有 modal 内部元素（默认1040，modal 是1055，body 内元素不应超过1050）
滚动本身不改层级，但内容变多后更容易暴露 z-index 问题，这点容易被忽略。
