应使用 overflow-y: auto 实现条件滚动，配合 max-height、overflow-x: hidden、-webkit-overflow-scrolling: touch 及阴影/圆角分层处理，避免父容器裁剪与渲染兼容性问题。
用 overflow-y: auto 控制垂直滚动，别用 overflow: scroll
直接加 overflow: scroll 会让滚动条永远显示（即使内容没溢出），在移动端尤其突兀。Bootstrap 本身不封装滚动容器类，得自己写轻量 CSS。关键点是：只在内容超长时才出现滚动条，且保留父容器的边框和阴影。
- 给容器设固定高度（如
max-height: 300px），否则overflow-y: auto不生效 - 必须同时设置
overflow-x: hidden，防止横向滚动干扰布局 - Bootstrap 5+ 的
shadow-sm/shadow类可直接叠加，但注意层级：阴影需作用于滚动容器本身，而非内部内容
边框 + 阴影组合要避开 border-radius 和 overflow 冲突
如果容器加了 rounded 类（比如 rounded-2）又设了 overflow-y: auto，部分浏览器（尤其是 Safari）会裁掉圆角区域里的阴影，导致视觉断层。这不是 Bug，是 CSS 渲染规范行为。
- 解决方案：把阴影和圆角拆到两层 — 外层 div 负责
shadow和rounded，内层 div 负责overflow-y: auto和max-height - 避免在滚动容器上同时用
border和shadow：border 会盖住部分阴影，建议用border: 1px solid #e9ecef（Bootstrap 默认浅灰）替代纯黑边框 - 移动端需加
-webkit-overflow-scrolling: touch提升滚动顺滑度（iOS Safari 旧版必需）
响应式高度适配：用 vh 或 Bootstrap 断点工具类
固定像素高度（如 300px）在小屏上容易撑出多余空白或截断内容。更稳妥的方式是结合视口单位或断点。
- 推荐用
max-height: 50vh（占屏幕一半），再配合min-height: 100px防止空内容时塌陷 - Bootstrap 5 的断点类可辅助控制：例如
max-h-50（自定义高度工具类）或用@media (max-width: 768px)单独设max-height: 200px - 慎用
h-100：它依赖父元素高度，若父级没明确高度（比如 flex 容器未设flex-shrink: 0），滚动会失效
常见错误：阴影被父容器裁剪或滚动条样式混乱
最常遇到的是阴影“消失”——实际是被父级 overflow: hidden 裁掉了；或者滚动条在 Chrome/Firefox 显示异常（比如宽得离谱、颜色不对）。
- 检查父容器是否意外加了
overflow: hidden，特别是用了card或modal-body这类 Bootstrap 组件时 - 滚动条美化尽量克制：Chrome/Edge 可用
::-webkit-scrollbar，但 Firefox 不支持，强行统一反而增加维护成本 - 如果内容含图片或 iframe，记得给它们加
max-width: 100%和height: auto，否则可能撑破容器宽度，触发意外的横向滚动
