给容器加 overflow: auto 最直接有效，需设明确 height 或 max-height；Flex/Grid 子项须加 min-height: 0 才生效；慎用 overflow: scroll；移动端加 -webkit-overflow-scrolling: touch；可用 overscroll-behavior: contain 阻断滚动传递。
给容器加 overflow: auto 最直接有效
页面某块区域（比如侧边栏、弹窗内容区、表格体）内容高度超出，又不想撑开整个页面，核心就是限制它的“可渲染范围”，并告诉浏览器“超出部分允许滚动”。overflow: auto 是最稳妥的选择：有溢出才显示滚动条，没溢出就不显示，不干扰布局。
注意别用 overflow: scroll —— 它强制显示滚动条（哪怕内容根本没超），在 macOS Safari 或启用了“隐藏滚动条”系统设置的设备上可能留白或行为异常。
- 必须给容器设明确的
height或max-height，否则overflow不生效（因为默认高度由内容撑开） - 如果容器是 Flex 子项，确认父级没设
align-items: stretch且自身没被 flex 拉伸失高 - 移动端需额外加
-webkit-overflow-scrolling: touch（iOS Safari 旧版）才能流畅滚动
overflow-x 和 overflow-y 要按需拆开控制
横向文字过长、代码块换行异常、响应式表格列宽失控……这些场景常只需滚 X 轴。直接设 overflow-x: auto; overflow-y: hidden 即可，比全向 auto 更精准。
但要注意：如果同时设了 overflow-x: hidden 和 overflow-y: auto，而内容既超宽又超高，Chrome 和 Firefox 会优先尊重 overflow-y，但 Safari 可能静默忽略 overflow-x 并允许横向滑动 —— 这属于浏览器兼容差异，建议用 white-space: nowrap + text-overflow: ellipsis 主动截断文本，而非依赖隐藏。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
滚动条样式难改？先确认是否被 overscroll-behavior 拦住了
有时给子容器设了 overflow: auto，滚动到顶/底时页面却跟着一起晃（尤其是模态框里滚动），那是浏览器默认的“滚动链式传递”在起作用。加一句 overscroll-behavior: contain 就能切断它。
这个属性对局部滚动体验影响很大，但容易被忽略：
-
overscroll-behavior: contain：本容器滚动到边界时，不触发父级滚动，也不触发刷新/回弹 - 若想保留下拉刷新（如 Web App），只设
overscroll-behavior-y: contain - 某些安卓 WebView 对该属性支持较弱，可降级用
touch-action: pan-y阻止误触横向拖拽
Flex/Grid 布局里局部滚动失效？检查 min-height: 0
在 Flex 容器中，子项默认有 min-height: auto，会阻止 height 和 overflow 生效 —— 这是最隐蔽也最高频的坑。只要容器是 display: flex 的直接子元素，且你希望它能局部滚动，就必须显式写 min-height: 0（或 min-width: 0 对应横向）。
Grid 布局同理，min-height: 0 是让 overflow 在 track 内生效的前提。没有这行，哪怕 height 写死、内容明显溢出，滚动条也不会出现。
