阴影常“消失”是因为 overflow-y: auto 触发裁剪边界，使 box-shadow 被遮挡；有效解法是外层加 position: relative + z-index + shadow-sm，或用伪元素模拟阴影。
直接给 .card 加 shadow-sm 和 overflow-y: auto，阴影大概率看不见——不是类没生效，是滚动容器的裁剪边界把 box-shadow 挡住了。
为什么 shadow 和 overflow-y 一起用时阴影常“消失”
这不是 Bug，是 CSS 渲染层的硬性限制：当元素设置了 overflow-y: auto，它的 box-shadow 会受自身裁剪边界约束。尤其内容刚好填满容器高度时，阴影完全压在边缘外侧，肉眼不可见。
- 常见错误：给同一个
<div class="card p-3 shadow-sm"> 同时设 <code>overflow-y: auto和max-height - 真正起效的组合只有两种：
– 外层容器加position: relative+z-index: 1+shadow-sm，内层设overflow-y: auto
– 或者用伪元素（::after）绝对定位模拟阴影，绕过裁剪限制 - 调试时最常漏一步：用了
shadow-none覆盖后，忘了重加shadow-sm - 主高度优先用视口计算：
max-height: calc(100vh - 200px)（减去导航栏、标题等固定高度） - 小屏下单独微调：
@media (max-width: 576px) { .scrollable { max-height: calc(100vh - 160px); } } - 如果滚动区在
.modal-body里，直接加内联样式：style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog - 滚动区内若含
<table> 或 flex 子项，务必加 <code>min-width: 0，防止撑宽导致横向滚动意外出现移动端 Safari 的 overflow-y 渲染延迟怎么破
iOS Safari 对
overflow-y: scroll有渲染延迟，尤其内容含图片或动画时。旧版需手动启用惯性滚动，新版可省略但留着也无害。- 加
-webkit-overflow-scrolling: touch到滚动容器上（仅 iOS 旧版需要，2023 年后新系统已默认启用） - 深色模式下，
shadow-sm默认透明度（rgba(0,0,0,.075)）在暗背景上几乎不可见，得用自定义box-shadow或媒体查询覆盖 - 滚动容器务必加
style="scroll-behavior: auto;"（显式关闭平滑滚动），避免某些安卓机型白屏或卡顿
最容易被忽略的点
外层容器没加
position: relative和z-index—— 没它，阴影再好看也出不来；或者滚动区父级存在overflow: hidden，直接把整个滚动区域和阴影一并裁掉。 - 加
怎么写响应式的 max-height 才不崩布局
写死 max-height: 400px 在手机上太高、桌面又太矮；只靠 h-75 这类工具类，容易因父容器 padding/margin 变化导致实际可用高度突变，滚动条跳闪甚至失效。
