modal内容溢出无滚动条需设.modal-body的max-height并overflow-y:auto；bootstrap 5+用modal-dialog-scrollable类最简，4版需手动设flex布局与高度约束。
Modal 内容溢出时滚动条不出现？检查 .modal-body 的高度约束
Bootstrap 默认不会给 .modal-body 设定固定高度或 max-height，所以内容一多就直接撑开模态框，滚动条根本不会触发。必须手动限制高度并启用溢出处理。
- 确保父容器（如
.modal-dialog）未被外部 CSS 意外设为height: 100%或flex: 1导致子元素无法收缩 - 在
.modal-body上设置max-height（推荐calc(80vh - 120px)，预留标题/底部空间），同时加overflow-y: auto - 避免对
.modal-content设置height: 100%—— 这会让.modal-body失去计算依据，滚动失效
使用 modal-dialog-scrollable 类最省事（Bootstrap 5+）
Bootstrap 5.2+ 原生支持滚动模态框，只需在 .modal-dialog 上加一个类，不用写额外 CSS。
- HTML 结构中，把
class="modal-dialog"改成class="modal-dialog modal-dialog-scrollable" - 该类会自动给
.modal-content设max-height: 80vh，并让.modal-body可垂直滚动 - 注意：它不兼容 Bootstrap 4，若项目还在用 v4，必须手写 CSS
- 滚动区域仅限
.modal-body，.modal-header和.modal-footer固定不动
Bootstrap 4 手动实现滚动：关键 CSS 规则不能少
Bootstrap 4 没有 modal-dialog-scrollable，得靠 CSS 控制。以下规则缺一不可：
.modal-dialog .modal-content {
max-height: 80vh;
display: flex;
flex-direction: column;
}
.modal-dialog .modal-body {
flex: 1;
overflow-y: auto;
max-height: calc(80vh - 100px); /* 减去 header + footer 高度 */
}
-
flex-direction: column是前提，否则flex: 1不生效 -
.modal-body的max-height必须显式设定，仅靠flex: 1在某些浏览器下仍可能撑满 - 如果用了自定义 header/footer 高度，要同步调整
calc()中的减数，否则顶部或底部会被截断
移动端滚动卡顿或失效？禁用 body 的 overflow 干扰
Modal 弹出时 Bootstrap 会自动给 加 overflow: hidden，但某些 UI 库（如某些 React 组件库）或自定义 CSS 可能覆盖它，导致内部滚动和页面滚动打架。
- 检查 DevTools 中
是否真有overflow: hidden；如果没有，手动补上或排查冲突样式 - 在 iOS Safari 上，若
.modal-body内含position: fixed元素，可能破坏滚动惯性，建议改用position: absolute - 避免在
.modal-body内嵌套另一个overflow: scroll容器 —— 多层滚动嵌套容易触发 iOS 的“滚动穿透”或响应迟钝
滚动是否生效，最终取决于 .modal-body 是否真正获得了可计算的、受限的高度上下文。很多问题表面是“没滚动条”，根源其实是父级高度塌陷或 flex 布局未正确传递约束。
