overflow类失效的根本原因是容器缺乏明确宽高约束；需先设置width/height或布局属性（如flex），再应用overflow类才能生效。
overflow-hidden 和 overflow-auto 这类类名看着能直接用，但多数时候加了没反应——不是 bootstrap 写错了，是你没给容器“划好地盘”。css 的 overflow 属性对无宽高约束的元素完全不生效，bootstrap 工具类只改属性值，不补尺寸。
为什么 overflow 类加了却没效果
根本原因就一个：父容器没有明确的 width 或 height（或 max-height）。overflow: hidden 不是“全局裁剪开关”，它只裁剪该元素内容超出其盒模型边界的部分；而如果这个边界本身没定义（比如高度为 auto），浏览器就不知道该裁哪。
-
overflow-hidden对position: absolute子元素无效——因为绝对定位元素脱离文档流，不参与父容器的溢出裁剪上下文 -
overflow-auto在内容没撑满容器高度时不会显示滚动条，调试时可临时加min-height: 600px验证是否生效 - Flex 容器中，子项若设了
min-width: 0或min-height: 0，可能拒绝收缩，导致overflow-hidden看似失效
让 overflow-auto 在 .card-body 里真正滚动起来
常见场景是卡片内容区需要垂直滚动，但写了 overflow-auto 却不动。问题几乎都出在布局链断裂上。
- 确保
.card是 flex 容器：class="card d-flex flex-column" - 给
.card设高度约束，比如h-100、style="height: 500px"或flex-fill（后者需父级也是 flex） -
.card-body必须有flex-fill（占满剩余空间）+overflow-auto，缺一不可 - 别忘了检查内容是否真超出高度——空卡片或文字太少时，
overflow-auto就是静默的
表格横向滚动必须用 .table-responsive 包裹
直接给 <table> 加 overflow-x: auto 没用，因为 <table> 是替换元素，且默认 display: table 会强制撑宽父容器，绕过溢出控制。
- 必须用块级容器包裹：
<div class="table-responsive"><table class="table">...</table></div> -
.table-responsive在 Bootstrap v5 中默认只在max-width: 991.98px下生效；如需全屏启用，改用.table-responsive-sm或自定义 CSS - 若内容仍溢出不滚动，检查祖先元素是否带
overflow: hidden，或是否用了table-layout: auto（应设为fixed并配合white-space: nowrap）
body 滚动条关不掉？先锁住 html 和 body 的高度
只给 body 加 overflow: hidden 常失败，因为 html 和 body 默认高度不占满视口，overflow 属性压根不触发。
- 必须同时设置：
html, body { height: 100%; overflow: hidden; } - 慎用
min-height: 100vh替代 —— iOS Safari 某些版本下，vh动态变化会意外恢复滚动 - 模态框场景下，不要直接写
body { overflow: hidden }，应兜底写body.modal-open { overflow: hidden !important }，避免破坏 Bootstrap 的 JS 恢复逻辑
最常被忽略的一点：Bootstrap 的 overflow 类只是快捷方式，它们不解决布局前提。你得先让容器有“形”（宽高/布局角色），它才能有“界”（溢出行为）。
