阴影常“消失”是因为 overflow-y: auto 触发裁剪边界，使 box-shadow 被截断；正确做法是外层负责阴影与定位（需 position: relative + z-index: 1），内层负责滚动与高度控制。
直接给滚动容器加 shadow-sm 和 overflow-y: auto，阴影大概率看不见——不是类没生效，是 CSS 裁剪规则把阴影挡在了可视区外。
为什么 shadow 和 overflow-y 一起用时阴影常“消失”
这不是 Bug，是浏览器渲染层的硬性限制：当元素设置了 overflow-y: auto，它的 box-shadow 会受自身裁剪边界约束。尤其内容刚好填满容器高度时，阴影完全压在边缘外侧，肉眼不可见。
常见错误是给同一个 <div class="p-3 shadow-sm"> 同时设 <code>overflow-y: auto 和 max-height，结果阴影被裁掉。
- 真正起效的组合只有两种：外层负责阴影 + 定位，内层负责滚动 + 高度控制
- 外层必须加
position: relative和z-index: 1（否则阴影仍可能被父级遮盖） - 别用
shadow-none覆盖默认样式后忘了重加——调试时最常漏这一步
怎么写响应式的 max-height 才不崩布局
写死 max-height: 400px 在手机上太高、桌面又太矮；靠 h-75 这类工具类又容易因父容器 padding 变化导致实际高度突变，滚动条跳闪甚至失效。
- 主高度优先用视口计算：
max-height: calc(100vh - 200px)（减去导航栏、标题等固定高度） - 小屏下单独重设：
@media (max-width: 576px) { max-height: calc(100vh - 160px); }，避免顶部留白过多 - 如果滚动区在
.modal-body里，直接加内联样式：style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog - 表格类内容要额外加
min-width: 0，防止 flex 子项撑宽导致横向滚动意外出现
边框和阴影怎么安全叠加不冲突
Bootstrap 的 border 类和 shadow 类可以自由组合，但有两个硬性前提：容器必须是 display: block，且父容器不能有 overflow: hidden。
- 对于垂直滚动块，重点不是“加边框”，而是确保边框不被滚动裁剪、不干扰阴影渲染
- 给外层容器加
border border-gray-200（或border-1），不是给滚动区本身加 - 滚动区内若含
<table>，必须设 <code>table-layout: fixed+word-break: break-word，否则边框错位 - 移动端 Safari 对
overflow-y: scroll渲染有延迟，旧版需加-webkit-overflow-scrolling: touch - 深色模式下，
shadow-sm的默认透明度（rgba(0,0,0,.075)）在暗背景上几乎不可见，得用自定义值或媒体查询覆盖
最易被忽略的点是：外层容器没加 z-index 导致阴影被兄弟元素遮盖，或者滚动区父级存在 overflow: hidden ——这两处一漏，再调 shadow 类也没用。
