树形菜单滚动条不显示的根本原因是父容器缺乏明确高度约束，需设置max-height（如calc(100vh - 60px)）并确保块级上下文；flex布局下左侧栏须加align-self: flex-start或flex: 0 0 auto防拉伸；树组件需外包wrapper并设overflow-y: auto和max-height，避免绝对定位导致溢出失效。
左边树形菜单容器必须设固定高度或最大高度
溢出滚动条不会自动出现，根本原因是父容器没有明确的尺寸约束。浏览器默认让内容撑开容器，overflow 属性在无尺寸限制时无效。
常见错误是只给 .sidebar 设置 overflow-y: auto，但没配 height 或 max-height，结果滚动条始终不显示。
- 推荐用
max-height（比如max-height: calc(100vh - 60px)），比固定height更适应不同屏幕 - 确保该容器有明确的块级上下文（避免被浮动或 flex 布局意外压缩）
- 若使用
flex布局，左侧栏需加flex-shrink: 0防止被压缩到无法滚动
滚动条样式要兼容 Chrome/Firefox/Safari
各浏览器对 ::-webkit-scrollbar 的支持差异大，Firefox 仅从 97+ 支持 scrollbar-width，Safari 对自定义滚动条支持有限。
最简兼容写法是只控制行为，不强求样式统一：
.sidebar {
overflow-y: auto;
scrollbar-width: thin; /* Firefox */
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 3px;
}
- 不要依赖
scrollbar-color（仅 Firefox 支持）做核心功能 - 移动端 Safari 默认隐藏滚动条，但拖动仍有效；如需常显，得用
-webkit-overflow-scrolling: touch（iOS 15+ 已逐步弃用） - 避免用
overflow: scroll，它会强制显示空滚动条，影响布局
树形组件（如 Ant Design / Element Plus）内部溢出失效
很多 UI 库的树组件（如 el-tree、Tree）内部用了绝对定位或 transform，导致父容器的 overflow 失效——子元素“逃逸”出裁剪边界。
解决路径很直接：
- 给树组件外层再包一层
<div class="tree-wrapper">，并设 <code>overflow-y: auto和max-height - 检查树节点是否用了
position: absolute或transform，如有，需在 wrapper 上加contain: layout或will-change: transform（慎用） - Ant Design 的
Tree在showLine=true时容易撑高，建议配合height+overflow双保险 - 左侧栏加
align-self: flex-start - 或把左侧栏设为
flex: 0 0 auto，再手动设max-height - 更稳妥的是：整个容器用
display: grid，定义grid-template-columns: 240px 1fr和grid-template-rows: 100vh，左侧直接overflow-y: auto
Flex 布局下左侧栏高度被右侧内容拉高
当两栏用 display: flex 实现时，右侧主内容区若很高，左侧栏会默认被拉伸到同等高度，导致 max-height 失效——因为 flex item 的 max-height 在交叉轴上不生效。
正确做法是切断这种拉伸关系：
滚动区域真正起作用的，从来不是“加了 overflow”，而是“容器被框住了”。树形菜单层级深、节点多，一旦忘了锁住高度，滚动就只是个摆设。
