阴影消失是因overflow-y: auto触发裁剪边界截断box-shadow，正确做法是外层容器加position: relative+z-index: 1+border+shadow-sm，内层设overflow-y: auto、calc(100vh-固定高度)max-height及min-width: 0。
直接给滚动容器加 shadow-sm 和 overflow-y: auto，边框可能显示正常但阴影会消失——这不是样式没生效，是 overflow 裁剪边界把 box-shadow 挡在了可视区外；边框本身若加在滚动区内，也容易被内容撑破或错位。
为什么滚动区加 border 后看起来“断开”或“偏移”
常见错误是给 <div class="p-3 border"></div> 这类滚动容器直接加 border 类，但它的子元素（比如 <table> 或 flex 项）会默认撑宽父容器，导致边框被内容顶出、左右溢出，甚至触发意外横向滚动。
- 表格类内容必须加
min-width: 0，否则table无视父容器宽度限制 - flex 子项（如
<div class="d-flex">）同样需要min-width: 0防止伸展溢出 - 别用
border类加在滚动区自身，应加在外层容器上——边框要“包住整个可滚动区域”，而不是“贴着内容画线” - 如果滚动区嵌在
.modal-body里，.modal-body默认无 padding 控制，建议用px-3 py-2显式设内边距，再让外层容器加边框
怎么让边框和阴影同时稳定显示
关键不是“怎么加”，而是“加在哪一层”。滚动容器的裁剪行为会同时影响 box-shadow 和部分边框渲染逻辑（尤其当内容高度刚好填满时），必须分层处理。
- 外层容器加
position: relative、z-index: 1、border类（如border border-gray-200）和shadow-sm - 内层滚动区只负责功能：设
overflow-y: auto、响应式max-height、min-width: 0 - 别在调试中用
shadow-none覆盖后忘记重加——这是最常漏的一步 - 如果用了深色模式，
shadow-sm在暗背景下可能不明显，需配合自定义 CSS 变量调整--bs-box-shadow-sm
响应式 max-height 怎么写才不跳闪、不截断
写死 max-height: 400px 在 iPhone SE 上太高，在 27" 显示器上又太矮；用 h-75 等工具类则受父容器 padding 干扰，实际高度偏差可达 30px。
- 主高度用视口计算：
max-height: calc(100vh - 200px)（减去 header、nav 等固定高度） - 小屏单独微调：
@media (max-width: 576px) { .scrollable { max-height: calc(100vh - 160px); } } - 在
.modal-body中？直接写内联样式：style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog - 滚动区含
<table>？务必加table-layout: fixed+word-break: break-word，否则边框位置随内容宽度浮动
iOS 和旧安卓 WebView 的滚动兼容要点
部分 iOS Safari 版本（尤其是 iOS 15 之前）和旧版安卓 WebView 对 overflow-y: auto 渲染异常，会出现卡顿、白屏或无法拖动。
- 必须加
-webkit-overflow-scrolling: touch（仅对 WebKit 内核生效，不影响现代 Chrome/Firefox） - 避免在滚动区上设
transform或filter，它们会触发新层叠上下文，干扰滚动性能 - 如果用了
scroll-behavior: smooth，务必在移动端降级为scroll-behavior: auto，否则 iOS Safari 可能白屏 - 测试重点机型：iPhone SE（小屏 + 高 DPR），它的视口计算最容易暴露
calc()偏差
真正麻烦的不是加样式，而是层叠顺序、裁剪边界和视口计算这三者的耦合——稍有错位，边框就断、阴影就丢、滚动就卡。每次改完记得用 DevTools 检查目标元素的 scrollHeight 和 clientHeight，确认前者确实大于后者，否则滚动根本不会触发。
