加 overflow-y: auto 无滚动条是因为内容未溢出容器，必须显式设置 max-height（如 70vh）才能触发滚动，否则容器随内容撑开；需用 devtools 验证 scrollheight > clientheight。
为什么给元素加了 overflow-y: auto 却没滚动条？
不是 CSS 写错了，而是容器根本没“溢出”——overflow-y: auto 只在内容高度超过容器可用高度时才触发滚动。常见错误是只写 overflow-y: auto，却忘了设 max-height 或 height。比如直接给 <div> 加 <code>style="overflow-y: auto;"，但没限制高度，它就会随内容无限撑开，永远不滚动。
实操建议：
- 必须显式设置
max-height（推荐用70vh、400px等具体值），不能只靠父容器或 flex 布局“挤”出高度 - 避免用
height（固定高），小屏下容易裁切内容；max-height更安全 - 用浏览器 DevTools 检查该元素计算后的
height和scrollHeight，确认scrollHeight > clientHeight
Bootstrap 5 的 .modal-body 滚动为啥失效？
因为 .modal-body 默认没有 max-height，只靠内容撑开，overflow-y: auto 形同虚设。它不是样式被覆盖，而是压根没进入可滚动状态。
实操建议：
- 直接在
.modal-body上加内联样式：style="max-height: 70vh; overflow-y: auto;" - 不要改
.modal-dialog或.modal-content的高度，否则破坏居中逻辑和响应式表现 - 移动端 Safari 必须加
-webkit-overflow-scrolling: touch才有惯性滚动 - 如果用了 Bootstrap 5.2+ 的
scrollable属性，它只作用于.modal-body，默认max-height: 60vh，仍需按实际内容校验是否够用
表格怎么同时支持横向 + 纵向滚动？
<table> 元素本身不响应 <code>overflow，直接给它设 max-height 和 overflow-y: auto 完全无效。
实操建议：
- 外层用
<div class="table-responsive"> 处理水平滚动（它自带 <code>overflow-x: auto） - 再嵌套一层
<div style="max-height: 400px; overflow-y: auto;"> 包住 <code><table> <li>结构必须是：<code><div class="table-responsive"><div style="max-height: 400px; overflow-y: auto;"><table class="table">...</table></div></div> - 别把
table-responsive和overflow-y: auto都加到同一个<div> 上——水平和垂直滚动需要分离控制 <h3>自定义滚动条样式为什么没生效？</h3> <p>因为伪元素 <code>::-webkit-scrollbar必须作用在「真正发生滚动的元素」上，不是.modal，也不是.modal-content，而是.modal-body本身，且它得满足两个前提：已设overflow-y: auto，且子内容确实溢出了。实操建议：
- 先用 DevTools 确认
.modal-body计算后overflow-y是auto，不是visible或inherit - CSS 写法示例：
.modal-body::-webkit-scrollbar { width: 8px; }、.modal-body::-webkit-scrollbar-track { background: #f1f1f1; }、.modal-body::-webkit-scrollbar-thumb { background: #c1c1c1; } - Firefox 不支持
::-webkit-scrollbar，需用 JS 库如simplebar或overlay-scrollbars - 别给
.modal-body设overflow-y: scroll——它会强制显示滚动条，干扰自定义逻辑
overflow就完事；最容易被忽略的是：没检查scrollHeight是否真大于可视高度，以及没确认目标元素是否确实是滚动上下文的发起者。 - 先用 DevTools 确认
