必须只给 .modal-body 设 max-height、overflow-y: auto 和 -webkit-overflow-scrolling: touch 才能生效，因 .modal-dialog 为 flex 布局且 .modal-content 无高度限制，导致父级截断滚动上下文；.modal 和 .modal-content 加 overflow 会破坏居中与响应式，而 .modal-dialog-scrollable 类仅提供默认 60vh 高度，常不满足实际需求。
只给 .modal-body 设 max-height 和 overflow-y: auto 就能生效，其他地方加滚动样式基本没用。
为什么直接给 .modal 或 .modal-content 加 overflow-y: auto 不起作用
Bootstrap 的 .modal-dialog 默认是 display: flex，而 .modal-content 没设高度限制，整个模态框会随内容撑开——滚动行为被父级弹性布局“截断”。浏览器根本不会触发子元素的滚动，除非滚动容器自身有明确的高度边界和溢出声明。.modal 和 .modal-content 是布局容器，不是语义化的内容承载区，加 overflow 会破坏垂直居中和响应式缩放。
.modal-body 必须同时满足的三项 CSS 规则
缺一不可：
-
max-height（别用height，否则小屏会被裁切），推荐用视口单位如70vh或calc(100vh - 216px)（预留 header/footer 空间） -
overflow-y: auto（用scroll会强制显示滚动条，干扰视觉；auto只在溢出时出现） -
-webkit-overflow-scrolling: touch（iOS Safari 必须加，否则滚动卡顿、无惯性）
示例写法：<div class="modal-body" style="max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;">
modal-dialog-scrollable 类为什么有时不滚动
这个类只是启用滚动逻辑，底层确实会给 .modal-body 加 max-height: 60vh 和 overflow-y: auto，但这个值在富文本、表单或小屏设备上常不够用，且极易被破坏：
- 父级
.modal-content或.modal-dialog被设了height: 100%或flex: 1，导致子元素无法继承有效高度 -
.modal-body里用了display: flex; flex-direction: column却没给子容器设flex: 1，会导致高度塌陷 - 移动端 Safari 缺
-webkit-overflow-scrolling: touch，滚动卡顿或失效
建议显式覆盖：<div class="modal-body" style="max-height: 75vh; overflow-y: auto;">
自定义滚动条样式为何没效果
因为 ::-webkit-scrollbar 只对实际滚动的元素生效，且仅限 WebKit 内核（Chrome/Safari/Edge）。很多人写了却没效果，是因为选错了目标：不是 .modal 或 .modal-content，而是 .modal-body 本身，且它得真正发生溢出。
最小必要规则集（直接加到 CSS 文件里）：
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }Firefox 不支持该伪元素，如需统一外观，必须引入 simplebar 或 overlay-scrollbars 等第三方库。
真正难的不是让滚动条出现，而是确保 .modal-body 在各种设备、各种内容长度下都稳定触发滚动——它既不能被父级 flex 截断，也不能被第三方组件悄悄重置样式。
