overflow-y: auto 无滚动条是因内容未溢出，需设 max-height 并确保 scrollheight > clientheight；shadow-sm 不见是 overflow 裁剪所致，应外层加 position: relative 和 z-index，内层不加 shadow。
overflow-y: auto 没滚动条？先看 scrollHeight 和 clientHeight
不是 class 没加对，是容器根本没“溢出”——overflow-y: auto 只在内容高度超过容器可用高度时才生效。常见错误是只写 overflow-y: auto，却漏掉 max-height。
必须显式设 max-height，推荐用视口单位或减法计算：style="max-height: calc(100vh - 200px);"（减去导航栏、标题等固定高度）。纯 height 易在小屏裁切内容，max-height 更安全。
- 验证是否生效：用浏览器 DevTools 查看该元素的
scrollHeight是否大于clientHeight。若相等，说明还没溢出，滚动不会触发 - 滚动区内若含
table或flex子元素，务必加min-width: 0，防 flex item 撑宽容器引发意外横向滚动 - 移动端 Safari 对
overflow-y: scroll有渲染延迟，旧版本需加-webkit-overflow-scrolling: touch（新版本可省）
shadow-sm 加了却看不见？别让 overflow 裁剪掉阴影
这不是 Bug，是 CSS 渲染规则：overflow: auto 触发的裁剪边界会把 box-shadow 截断，尤其内容刚好填满时，阴影完全压在外边缘外侧。
唯一可靠解法是分层：
- 外层容器加
position: relative和z-index: 1，再套 Bootstrap 的shadow-sm或shadow - 内层滚动区只负责
overflow-y: auto和max-height，不加shadow - 父容器不能设
overflow: hidden——这是阴影消失最常被忽略的原因 - 别用
shadow-none覆盖后忘了重加；也别直接给滚动区加border——它和shadow叠加时若父容器有overflow: hidden，边框和阴影都会被裁
边框和阴影怎么同时稳稳显示？关键在 display 和层级
边框本身没问题，但和 shadow 组合时容易因布局干扰失效。关键控制点：
- 图片或内容块必须有
display: block（如加img-fluid或d-block），否则内联默认baseline对齐会挤压shadow渲染空间 - 外层容器加
border类（如border border-gray-200或border-1），不是给滚动区本身加 - 如果用了
rounded类，且内容超出圆角区域，需额外加overflow-hidden（Bootstrap 5.3+ 支持）来统一裁剪，否则shadow会“撑开”成椭圆 - 深色模式下，
shadow-sm默认透明度（rgba(0,0,0,.075)）在暗背景上几乎不可见，得用@media (prefers-color-scheme: dark)单独改颜色
响应式断点下滚动+阴影怎么不跳闪？别全靠工具类
在 sm 或 md 切换时，单纯靠 h-75 h-lg-100 类控制高度，容易因父容器 padding/margin 变化导致实际可用高度突变，滚动条跳闪甚至消失。
- 实操建议：用
@media (max-width: 768px)单独重设max-height，比纯工具类更可控 - 如果滚动区在
.modal-body里，直接加内联样式：style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog - 滚动容器务必加
style="scroll-behavior: auto;"（显式关闭平滑滚动），避免某些安卓机型白屏或卡顿 - 最容易被忽略的是外层容器的
position: relative和z-index——没它，阴影再好看也出不来
