阴影不可见是因overflow-y: auto触发裁剪边界截断box-shadow，须外层加position: relative+z-index: 1+shadow-sm，内层专注overflow-y: auto与calc(100vh-固定高度)响应式max-height。
直接给滚动容器加 shadow-sm 和 overflow-y: auto，阴影大概率看不见——不是类没生效，是 CSS 裁剪规则把阴影挡在了可视区外。必须分层：外层负责投影 + 定位，内层专注滚动 + 高度控制。
为什么 shadow-sm 加了却没效果？
这不是 Bug，是浏览器渲染层的硬性限制：overflow-y: auto 会触发裁剪边界（clipping boundary），而 box-shadow 属于该元素的盒模型附属效果，会被自身裁剪区域截断。尤其当内容刚好填满容器高度时，阴影完全压在外边缘外侧，肉眼不可见。
- 常见错误：给同一个
<div class="p-3 shadow-sm">同时设overflow-y: auto和max-height - 真正起效的组合只有两种：
– 外层容器加position: relative+z-index: 1+shadow-sm
– 内层滚动区只管overflow-y: auto和响应式max-height，不加任何 shadow 类 - 别用
shadow-none覆盖后忘了重加——调试时最常漏这一步 - 外层若没
z-index，阴影可能被兄弟元素遮盖；父级若含overflow: hidden，阴影和边框都会被裁
怎么写响应式的 max-height 才稳？
写死 max-height: 400px 在小屏上太高、桌面又太矮；靠 h-75 这类工具类容易因父容器 padding/margin 变化导致实际高度突变，滚动条跳闪甚至消失。
- 主高度优先用视口计算：
style="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 子项时，务必加min-width: 0，防撑宽引发意外横向滚动
边框、阴影、移动端兼容怎么一起兜住？
Bootstrap 的 border 类和 shadow 类可以自由组合，但有两个硬性前提：容器必须是 display: block，且父容器不能有 overflow: hidden。
- 边框加在外层容器上（如
border border-gray-200），不是加在滚动区本身 - 滚动区内含
<table>时，必须设table-layout: fixed+word-break: break-word，否则边框错位 - iOS Safari 旧版对
overflow-y: scroll有渲染延迟，需加-webkit-overflow-scrolling: touch（新版本可省，但留着无害） - 深色模式下，
shadow-sm默认透明度（rgba(0,0,0,.075)）在暗背景上几乎不可见，得用自定义box-shadow或媒体查询覆盖 - 务必加
style="scroll-behavior: auto;"显式关闭平滑滚动，避免某些安卓机型白屏或卡顿
最容易被忽略的是外层容器没加 position: relative 和 z-index，或者滚动区父级存在 overflow: hidden——这两处一漏，边框和阴影就全失效，而且很难一眼定位问题根源。
