只改 .modal-body 才有效，因其是语义上唯一承载长内容的区域，且父级 flex 布局截断滚动上下文；bootstrap 5 官方推荐在此设 max-height 和 overflow-y: auto，并需配合 -webkit-overflow-scrolling: touch 修复 ios 卡顿。
直接给 .modal-body 加 max-height 和 overflow-y: auto 就行，其他地方动了反而容易失效。
为什么只改 .modal-body 才有效
Bootstrap 5 的 .modal-dialog 默认是 display: flex，而 .modal-content 没设高度限制，整个模态框会随内容撑开——滚动行为被父级弹性布局“截断”。你给 .modal 或 .modal-content 加 overflow-y: auto，浏览器根本不会触发滚动。只有 .modal-body 是语义上唯一该承载长内容的区域，且官方文档明确推荐在此处控制滚动。
-
.modal-body必须显式设max-height（别用height，小屏会被裁） - 同时配
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被设了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;">
<h3>移动端 Safari 滚不动？加这行就对了</h3>
<p>iOS Safari 对 flex 容器内的滚动支持弱，即使 <code>.modal-body 高度超限、overflow-y: auto 也设了，滚动仍卡顿或无惯性。这不是 bug，是 WebKit 渲染限制。
- 必须补一句：
.modal-body { -webkit-overflow-scrolling: touch; } - 这行只对 WebKit 内核生效（Chrome/Safari/Edge），Firefox 不需要也不识别
- 必须加在真正发生滚动的元素上，也就是
.modal-body，不是.modal或外层 wrapper - 如果用了
overlay-scrollbars等第三方滚动库，它会接管原生滚动，这行就无效了
自定义滚动条样式只对 .modal-body 生效
很多人写了 ::-webkit-scrollbar 却没效果，是因为选错了目标：不是 .modal 或 .modal-content，而是 .modal-body。
- 样式必须直接挂在
.modal-body上：.modal-body::-webkit-scrollbar、.modal-body::-webkit-scrollbar-track、.modal-body::-webkit-scrollbar-thumb -
width只对垂直滚动条有效；height是给水平滚动条用的，模态框极少需要 - Firefox 完全不识别
::-webkit-scrollbar，得另配scrollbar-width和scrollbar-color - Firefox 里
scrollbar-width: thin不起作用？可能是系统设置或版本卡住了：macOS 用户检查「系统偏好设置 > 通用 > 显示滚动条」是否为「自动」或「当滚动时」；设成「始终」会忽略thin
复杂点在于：滚动本身依赖高度计算，而高度又受视口、父容器、flex 布局、动态加载内容等多重影响——哪怕 CSS 写对了，scrollHeight ≤ clientHeight 时照样没滚动条。调试时先用 DevTools 确认 .modal-body 的计算高度和内容高度关系，比反复调样式更管用。
