垂直滚动需设overflow-y:auto和响应式max-height（如calc(100vh-200px)），阴影要外层容器添加并设position:relative+z-index或用伪元素模拟，避免被裁剪。
垂直滚动内容块怎么加 overflow-y 和 max-height
响应式垂直滚动的前提是内容高度超出容器时能自动出现滚动条，而不是撑开布局。关键不是用 overflow: auto 一塞了事，而是结合 max-height 控制上限，并让高度随屏幕尺寸变化。
常见错误是写死 max-height: 300px —— 在小屏上太高，在大屏上又太矮。正确做法是用视口单位或 Bootstrap 的断点类动态控制：
-
max-height: calc(100vh - 200px)（减去导航栏、标题等固定高度） - 或配合 Bootstrap 5 的响应式高度工具类，如
h-50 h-md-75 h-lg-100 - 必须同时设
overflow-y: auto，且确保父容器没有overflow: hidden拦截
阴影怎么用 Bootstrap 的 box-shadow 工具类加
Bootstrap 5 内置了 shadow-sm、shadow、shadow-lg 等类，但直接加在滚动容器上，阴影会被滚动内容裁剪——因为默认 overflow 容器的阴影不溢出边界。
解决办法只有两个：
- 给滚动容器加
position: relative+z-index: 1，再套一层外层 div 加阴影类（推荐） - 或者改用
box-shadow: 0 4px 6px -1px rgba(0,0,0,.1)手动写，避免被裁剪（需注意浏览器兼容性） - 别用
shadow-none覆盖默认样式后又忘了重加——这是调试时最常漏的一步
响应式断点下如何避免滚动条突然消失或错位
在 sm 或 md 断点切换时，如果只靠 h-75 这类类控制高度，容易因父容器 padding/margin 变化导致实际可用高度突变，滚动条跳闪甚至失效。
实操建议：
- 用
@media (max-width: 768px)单独重设max-height，比纯 class 更可控 - 滚动容器内若含
table或flex子元素，务必加min-width: 0防止 flex item 撑宽容器导致横向滚动意外出现 - 移动端 Safari 对
overflow-y: scroll渲染有延迟，加-webkit-overflow-scrolling: touch（仅 iOS 旧版需要，新版本可省）
为什么 shadow 和 overflow-y 一起用时阴影常“看不见”
这不是 Bug，是 CSS 层叠和裁剪规则的结果：当一个元素设置了 overflow: auto，它的阴影属于该元素的“盒阴影”，但渲染层会受其自身裁剪边界限制。尤其当内容刚好填满容器高度时，阴影完全被压在边缘外侧，肉眼不可见。
真正起效的组合只有：
- 外层容器加
shadow-sm，内层滚动区加overflow-y: auto和max-height - 或者用伪元素模拟阴影：
<div class="position-relative"><div class="scrollable">...</div></div>，然后给外层加::after绝对定位投阴影 - 别指望
shadow-lg在窄容器里还能清晰显示——它本身扩散半径大，小空间里只剩灰边，不如降级用shadow
滚动+阴影看着简单，实际卡点都在层叠上下文和裁剪边界上，调的时候得打开开发者工具看 computed styles，光看 class 容易误判。
