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