Bootstrap未提供容器最大高度工具类，需自定义CSS设置max-height与overflow-y:auto配合；Flex布局中须注意min-height:0和flex-shrink属性以确保滚动生效。
设置 .container 或 .container-fluid 的最大高度
bootstrap 本身不提供直接控制容器高度的类，.container 默认是自适应高度（由内容撑开），要限制最大高度，必须用 css 覆盖。不能依赖 max-height 类（bootstrap 5 没有内置这类工具类），得自己加样式。
常见错误是只写 max-height: 500px 却忘了 overflow-y: auto，结果内容溢出但不滚动；或者用了 height 而非 max-height，导致小屏下高度被强制截断。
- 推荐在自定义 CSS 中为容器加一个 class，比如
.container-scroll - 必须同时设置
max-height和overflow-y: auto，否则滚动条不会出现 - 如果容器内有 flex 子项，注意子项的
min-height: 0可能影响滚动行为（flex 项默认不收缩）
.container-scroll {
max-height: 60vh;
overflow-y: auto;
}
为什么 overflow-y: scroll 不如 auto 实用
用 scroll 会始终显示滚动条轨道（即使内容没溢出），在 macOS 上尤其明显——占位、干扰视觉；而 auto 只在需要时才显示，体验更干净。
但要注意：某些旧版 iOS Safari 对 auto 的判定较保守，偶尔不触发滚动（极少见），若真遇到，可加 -webkit-overflow-scrolling: touch 增强响应性。
-
overflow-y: auto是默认选择，够用且兼容好 -
overflow-y: scroll仅在需“滚动条常驻”设计时考虑（如固定布局调试） - 别混用
overflow: hidden和max-height，否则内容直接被裁掉，用户根本看不到多余部分
在 Flex 布局容器里嵌套滚动容器容易踩的坑
很多用户把 .container 放进 d-flex flex-column 的父容器后，发现 max-height 失效——这是因为 flex 容器默认不约束子项高度，子项会无限伸展。
典型现象：滚动条不出现，内容直接撑出视口底部。
- 给父 flex 容器加
flex-shrink: 0或明确高度（如height: 100vh） - 给滚动容器自身加
flex-shrink: 0+max-height，或改用flex: 1配合min-height: 0 - Bootstrap 5 的
.d-flex不自动设min-height: 0，需手动补上才能让max-height在 flex 子项中生效
<div class="d-flex flex-column h-100">
<header>Header</header>
<main class="flex-grow-1 overflow-auto" style="max-height: 400px;">
<div class="container">...</div>
</main>
</div>
移动端 Safari 滚动卡顿或失效怎么办
iOS Safari 对 overflow: auto 的滚动性能较敏感，尤其当容器内有大量 DOM 节点、阴影或 transform 动画时，容易卡顿甚至禁止滚动。
不是 Bootstrap 的锅，但和它常用组合（如 .card + .container + 表格）容易触发。
- 优先用
overflow-y: auto而非scroll，减少渲染压力 - 避免在滚动容器内使用
box-shadow或filter，必要时用will-change: transform提前提示渲染层 - 如果内容是表格，别把整个
<table>包进滚动容器，而是只包<tbody>，并确保<thead>固定
复杂滚动场景下，CSS 控制力有限，这时候该考虑用 JS 库（如 simplebar）接管，而不是硬调 max-height。
