必须只给.modal-body设max-height、overflow-y:auto和-webkit-overflow-scrolling:touch三者缺一不可，因.modal-dialog为flex布局且.modal-content无高度限制，导致父级容器截断滚动上下文，.modal或.modal-content加overflow无效。
只给 .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-dialog-scrollable类只是启用滚动逻辑，它内部确实会给.modal-body加max-height: 60vh和overflow-y: auto，但这个值在富文本、表单或小屏设备上常不够用 - 如果父级（比如
.modal-content）被设了height: 100%或flex: 1，.modal-body就无法继承有效高度，导致 max-height 失效
.modal-body 滚动设置必须包含哪些 CSS 规则
必须同时满足三项，缺一不可：
-
max-height（别用height，否则小屏会被裁切），推荐用视口单位如70vh或固定值如400px -
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;">
<h3>移动端 Safari 滚不动或卡顿的典型原因</h3>
<p>这不是 bug，是 WebKit 渲染限制：flex 容器内的滚动需要显式启用惯性滚动支持。</p>
<ul>
<li>该属性只对 WebKit 内核生效（Chrome/Safari/Edge），Firefox 不识别也不需要</li>
<li>必须加在真正发生滚动的元素上——即 <code>.modal-body，不是外层 wrapper 或 .modal
overlay-scrollbars 或 simplebar 等第三方滚动库，它们会接管原生滚动，这行就失效了.modal-body 里用了 display: flex; flex-direction: column 却没给子容器设 flex: 1，会导致高度塌陷，max-height 失效自定义滚动条样式为何没效果
因为 ::-webkit-scrollbar 只对实际滚动的元素生效，且仅限 WebKit 内核。
- 必须写在
.modal-body上，例如：.modal-body::-webkit-scrollbar { width: 8px; } - Firefox 完全不支持该伪元素，没有等效 CSS 标准属性；若需跨浏览器统一样式，必须引入 JS 滚动库（如
simplebar） - 别给
.modal或.modal-content写::-webkit-scrollbar，它们根本不滚动
滚动本身不难，难的是在 flex 布局、响应式、移动端兼容和第三方组件共存的环境下，让 .modal-body 稳定获得可预测的高度和滚动上下文——所有问题几乎都绕不开它。
