<p>直接加 overflow-y: auto 无效是因为它仅在内容高度超过容器可用高度时触发滚动；必须配合 max-height（如 calc(100vh - 220px)）并处理 min-width: 0、外层阴影定位及动态内容重排。</p>
为什么直接加 overflow-y: auto 不滚动
容器没有高度上限时，overflow-y: auto 完全无效——它只在内容高度超过容器可用高度时才触发滚动条。Bootstrap 没有内置的「可滚动列表」类（比如 scrollable-list），所有滚动行为都依赖 CSS 的显式高度控制。
常见错误是只写 class="overflow-y-auto" 或套用 h-75，结果在 modal、flex 容器或带 padding 的父级里，实际可用高度偏差高达 30–50px，导致滚动条时有时无、小屏撑满、桌面留白。
- 必须配
max-height（不能只靠height，否则内容少时空白拉长） - 优先用视口计算：
max-height: calc(100vh - 220px)，减去 header/nav/fixed footer 等固定高度 - 避免
vh单位裸用：iOS Safari 和部分安卓 WebView 对100vh解析不准（地址栏缩放影响），calc()更稳 - 若列表嵌在
.modal-body中，直接加内联样式：style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog
动态内容高度下怎么防撑宽、防横向滚动
当列表项含 <table>、flex 子项或长文本时，容易因内部元素不收缩，把容器横向撑开，意外触发 overflow-x: auto，破坏垂直滚动体验。
- 滚动区直接子元素务必加
min-width: 0（尤其是div包裹的table或display: flex容器） - 禁用
white-space: nowrap在时间点/标签类短文本上——小屏会溢出，且无法被overflow-y截断 - 若用 Bootstrap 栅格（如
row+col）布局每项，给.row加style="min-width: 0;"，防止栅格系统默认的min-width: min-content干扰 - 测试重点看 iPhone SE：DPR 高 + 视口窄，最易暴露
min-width缺失导致的横向滚动
滚动阴影被裁剪？外层定位必须拆开
直接给滚动容器加 shadow-sm，阴影常不可见——因为 overflow-y: auto 触发的裁剪边界会把 box-shadow 挡在可视区外，尤其内容刚好填满高度时。
- 正确结构：外层容器负责阴影和定位，内层负责滚动和高度控制
- 外层加
position: relative; z-index: 1;和shadow-sm - 内层设
overflow-y: auto、响应式max-height，且确保其父级没overflow: hidden - 调试时检查是否误用了
shadow-none覆盖后未重加——这是最常漏的一步
内容动态增删后滚动条异常？别依赖 JS 重算高度
用 JS 动态插入/删除列表项后，滚动容器高度没及时更新，可能造成滚动条卡死、位置跳变或消失。这不是 Bootstrap 的锅，而是 CSS 高度计算机制问题。
- 避免手动调
element.style.maxHeight = ...—— 易与 CSS 媒体查询冲突 - 推荐方案：保持
max-height: calc(100vh - Xpx)不变，让浏览器自动重排；仅当顶部固定区域高度变化（如导航栏展开）时，才用new ResizeObserver更新 calc 值 - 若用 Vue/React，别在列表项中用
key强制重渲染整个滚动区——只更新数据，让 DOM 自然 diff - 超 50 条建议分页或虚拟滚动（Bootstrap 本身不提供虚拟滚动，需接
react-window或手写IntersectionObserver）
滚动容器的高度计算不是一次写死就能一劳永逸的事。视口减法里的像素值、min-width: 0 的施加位置、外层阴影的层叠关系——这三个地方稍有遗漏，就会在某个机型或某个内容长度下突然失效。
