滚动区域必须用固定高度容器隔离上下文：html和body设height:100%，外层flex垂直布局，header/footer设高并flex-shrink:0，main设flex:1和overflow-y:auto，才能确保仅中间区滚动。
滚动区域必须用固定高度容器隔离上下文
HTML 管理系统里常见的“左侧菜单 + 顶部导航 + 中间内容区”结构，如果直接让 body 滚动，整个页面都会动；想只让中间区域滚，就得切断它和父级的默认流关系。核心不是加 overflow，而是先让它“有边界”。
常见错误是只给 main 加 overflow-y: auto，但没设高度——浏览器根本不知道该在哪截断，结果还是整页滚。
-
html和body必须设height: 100%（否则flex: 1失效） - 外层用
display: flex; flex-direction: column，把header、main、footer垂直排列 -
header和footer设明确高度（如height: 60px），并加flex-shrink: 0 -
main设flex: 1; overflow-y: auto，它才会撑满剩余空间并独立滚动
多栏布局下 column-count 不能直接滚动
管理系统里常有“三栏列表”需求（比如用户列表 + 详情 + 日志），有人试 column-count: 3 配 overflow-y: auto，发现完全不生效——这不是 bug，是 column-count 本身不创建新的滚动上下文，它只是视觉切分文本流，DOM 还是线性的。
真要每栏各自滚动，必须放弃 column-count，改用 display: grid 划分独立容器：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 外层
grid容器设grid-template-columns: 250px 1fr 300px，别设overflow - 每个子栏单独设
min-height: 0（防 flex/grid 默认拉伸）和overflow-y: auto - 确保子栏内容不靠
height: 100%强撑，而用max-height或flex: 1动态适应 - iOS Safari 下若滚动卡顿，给子栏加
-webkit-overflow-scrolling: touch
自定义滚动条只在 WebKit 内核生效
管理系统 UI 统一性高，常要求隐藏原生滚动条或换颜色。但 ::-webkit-scrollbar 只对 Chrome、Edge、Safari 有效，Firefox 和新版 Safari 不支持伪元素定制，只能用 scrollbar-width 和 scrollbar-color 控制粗细与配色。
别指望一套 CSS 覆盖所有浏览器：
- WebKit：用
div::-webkit-scrollbar { width: 8px; }、div::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; } - Firefox：只支持
scrollbar-width: thin（或auto/none）和scrollbar-color: #666 #f0f0f0 - 不要给
html或body写自定义滚动条——它会污染全局，且在部分安卓 WebView 中触发渲染异常 - 如果必须跨浏览器统一外观，优先考虑轻量 JS 方案（如
simplebar），而非强行 hack CSS
列表项内嵌滚动容器容易被 flex 撑开
管理系统里表格、卡片列表常嵌套可滚动区域（如操作日志折叠面板）。这时最常踩的坑是：明明写了 max-height: 200px; overflow-y: auto，滚动条就是不出现。
原因几乎总是父级用了 display: flex，而子项默认 align-items: stretch，把滚动容器拉高到填满交叉轴，max-height 形同虚设。
- 给滚动容器加
align-self: flex-start（Flex 子项）或min-height: 0（更通用） - 检查 computed height 是否真等于你写的
max-height，用开发者工具看“Layout”面板 - 如果滚动容器是 Grid 子项，加
min-block-size: 0替代min-height - 避免在滚动容器内部再用
height: 100%，它可能和外部 flex 计算冲突，改用flex: 1更稳
真正难的不是写几行 CSS，而是判断滚动行为该由哪一层容器负责——管理系统里层级深、布局嵌套多，一个 min-height: 0 漏掉，整块滚动就失效。每次加 overflow 前，先确认它的父容器是否已切断文档流并设好尺寸约束。
