<p>滚动列表需配合“可变但有上限”的max-height（如calc(100vh - 固定高度)）才能动态撑高并正确触发滚动条，单独使用overflow-y: auto无效；须避坑flex子项拉伸、表格溢出、阴影裁剪及断点跳闪等问题。</p>
滚动列表能随内容动态撑高、又在超出时自动出现滚动条，关键不是靠 overflow-y: auto 单独生效，而是它必须和一个“可变但有上限”的高度控制配合——否则小屏上撑满全屏、大屏上留大片空白，都是因为没处理好这个边界。
为什么直接加 overflow-y: auto 滚不动
Bootstrap 的工具类本身不提供滚动触发逻辑；overflow-y: auto 只在容器有明确高度限制且内容溢出时才显示滚动条。写死 max-height: 400px 或只用 h-75 都会失效：前者在 iPhone SE 上可能高出一倍，在 27 寸屏上又太矮；后者在 flex 容器里常被父级 padding 吃掉 20–30px，导致实际可用高度突变、滚动条忽隐忽现。
必须用视口计算 + 断点微调：
-
style="max-height: calc(100vh - 200px);"是起点（减去 header/nav 固定高度） - 小屏单独覆盖：
@media (max-width: 576px) { .scroll-list { max-height: calc(100vh - 140px); } } - 如果列表在
.modal-body里，直接写style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog
怎么让高度“动态”但不破坏布局
所谓“动态高度”，是指容器高度随内容自然增长，直到触达 max-height 上限才启用滚动——这要求子项不能强制撑宽或撑高父容器。常见翻车点是表格、Flex 子项、图片未设约束。
实操要点：
- 滚动容器内若含
<table>，给它加table-responsive并确保外层有min-width: 0 - 子项用
flex布局时，务必设min-width: 0和min-height: 0，防止文本或图片拉伸父容器 - 避免对滚动容器设
height: 100%—— 它会锁死高度，让calc()失效 - 测试时重点看 iOS Safari：旧版需加
-webkit-overflow-scrolling: touch到滚动容器上，否则卡顿
阴影和滚动共存时为什么看不见
直接给滚动容器加 shadow-sm，阴影大概率被裁剪——因为 overflow-y: auto 的渲染边界会截断 box-shadow。这不是 Bug，是 CSS 规则。
唯一可靠解法是分层：
- 最外层：
<div class="position-relative z-1 shadow-sm border"> - 中间层（滚动区）：
<div style="max-height: calc(100vh - 200px); overflow-y: auto; scroll-behavior: auto;"> - 内层：纯内容，不设任何高度或 overflow
别用 shadow-none 覆盖后忘了重加；也别试图用伪元素模拟阴影——除非你确认所有目标浏览器都支持 ::after 在滚动容器内的定位精度。
响应式断点切换时滚动条跳闪或消失
不是代码写错了，而是 max-height 计算值在断点切换瞬间因父容器 padding、font-size 或 line-height 微变，导致可用高度差出 1–2px，滚动条就跟着闪一下或消失。
缓解方法很具体：
- 在断点媒体查询里，用
max-height而非height，保留弹性空间 - 给滚动容器加
scroll-padding-top: 1rem，避免锚点滚动时顶部被遮挡引发重绘 - 禁用平滑滚动：
scroll-behavior: auto（iOS Safari 和部分安卓 WebView 对smooth渲染异常，会导致白屏） - 小屏下给子项设
fs-sm或font-size: 0.875rem，统一行高，减少高度抖动
真正麻烦的不是写几行 CSS，而是每次改一个 padding 或加一个 border，都要重新验证 calc() 是否还准——尤其当滚动区嵌在 modal、offcanvas 或 tab-pane 里时，那几像素偏差就会让滚动条彻底失效。
