Bootstrap 5 中 overflow-hidden 和 overflow-auto 生效的前提是父容器有明确宽高；body 滚动需同时设置 html, body { height: 100%; overflow: hidden; }；.card-body 滚动失效主因是布局链断裂，须确保 .card 为 flex-column 容器并设高度。
怎么用 Bootstrap 5 控制 overflow：隐藏 vs 滚动
bootstrap 5 提供了开箱即用的 overflow-hidden 和 overflow-auto 等工具类，但直接套用常失效——根本原因是这些类只改 overflow，不设宽高，而 css 的 overflow 属性对无尺寸约束的元素完全无效。
-
overflow-hidden不是“全局隐藏”，它只裁剪该元素自身内容超出其盒模型边界的部分 -
overflow-auto不会自动让区域可滚动，前提是父容器有明确高度（比如height: 300px或flex-fill） - 若想在
.card-body内启用滚动，必须确保它的父级（如.card）是 flex 容器且设了flex-direction: column，否则高度无法传递
为什么 body 滚动条关不掉？关键在 height: 100%
很多人加了 overflow-hidden 到 body 却仍能滚页面，是因为 html 和 body 默认高度不占满视口。CSS 的 overflow 在高度未定义时压根不生效。
- 必须同时设置：
html, body { height: 100%; overflow: hidden; } - 如果用了
min-height: 100vh替代height: 100%，在某些 iOS Safari 版本下会失效——vh动态变化时可能触发意外滚动 - 禁用全局滚动后，记得给需要滚动的区域（如
.card-body）加上flex-fill+overflow-auto，否则它会塌缩成零高度
Card Body 滚动失效的三个典型场景
即使写了 overflow-auto，.card-body 经常还是不滚动——问题几乎都出在布局链断裂上。
- 没给
.card加h-100或style="height: 100%"：父容器没高度，子元素再设flex-fill也撑不起来 - 忘了把
.card设为 flex 容器：class="card d-flex flex-column"缺一不可，否则flex-fill对.card-body无效 - 内容太短，没溢出：
overflow-auto只在内容高度 > 容器高度时才显示滚动条；调试时可用min-height: 600px强制触发
SVG 或绝对定位元素被意外裁剪怎么办
当父容器用了 overflow-hidden，里面的 <svg>、position: absolute 元素或 tooltip 常被截断——这不是 Bug，是 CSS 规范行为：overflow 会创建新的层叠上下文和块格式化上下文，把子元素严格框死。
- 解决方法不是去掉
overflow-hidden，而是把 SVG 或弹层移出该容器 DOM 结构（例如挂到body下） - 如果必须保留在原位置，可用
overflow: visible覆盖，但要小心：这会让内部滚动失效，且可能破坏响应式布局 - 切记：任何
overflow设置都要求父元素有明确宽高，否则浏览器无法计算“溢出”的基准
height: 100% 这一行——它看着像装饰，其实是整个 overflow 行为的开关。 
