左栏设position: fixed却无法滚动，根本原因是未设置可计算高度边界，必须配合max-height: 100vh或height: calc(100vh - header高度) + overflow-y: auto；同时需避免float布局、确保flex子项设min-height: 0，并注意macos滚动条默认隐藏。
左栏设了 position: fixed 却滚不动
这不是滚动条“没出来”，而是容器根本没形成可溢出的上下文。position: fixed 元素默认高度是内容撑开的，不是视口高——所以即使菜单项很多，只要没显式限制高度，overflow-y: auto 就不会生效。
必须手动给它一个可计算的边界：
-
height: calc(100vh - 64px)（减去 header 高度），再配overflow-y: auto - 或者更稳妥：用
max-height: 100vh+overflow-y: auto，避免因 header 高度动态变化导致计算偏差 - 记得把 padding 移到内部容器（如
.sideInner），别直接写在 fixed 元素上，否则会干扰高度计算
用 float 布局时左栏滚动失效
浮动元素本身不参与父容器高度计算，max-height 和 overflow 在它身上基本无效——浏览器压根不知道它该被约束在哪。
常见表现是：滚动条出现但完全不能拖动，或整个菜单随页面一起滚。
- 立刻弃用
float: left，改用display: flex或display: grid - 若必须兼容老浏览器，至少给父容器加
overflow: hidden触发 BFC，并确保左栏有明确width和max-height -
height: 20px这类刚性高度绝对不能用——<h5></h5>默认行高就超 24px，内容直接被裁掉
flex 布局下左栏 overflow-y: auto 失效
Flex 子项默认会拉伸填满空间，哪怕内容很少，它也会被“撑开”，导致永远不触发溢出。这是最隐蔽的失效原因。
关键不是加 overflow，而是告诉 Flex：“你可以缩小”：
- 给左栏加
min-height: 0（推荐） - 或设
flex: 0 1 auto（等价于flex-grow: 0; flex-shrink: 1; flex-basis: auto） - 绝对不要只设
flex-shrink: 0——它会让左栏拒绝压缩，反而把右栏挤跑 - 如果用了
flex-direction: column，同理要检查子项是否设了min-height: 0
滚动条在 macOS 上“看不见”是不是坏了？
不是坏了，是系统默认隐藏——只有悬停或开始滚动时才淡入。很多人误以为没生效，其实拖动触控板或按空格键就能滚。
若需强制常显（仅调试用）：
- CSS 中加
scrollbar-width: thin（Firefox） - 或
::-webkit-scrollbar { width: 8px; }（Chrome/Safari） - 但生产环境不建议强行显示——破坏原生体验，且 iOS 完全不支持自定义滚动条
真正容易被忽略的是：滚动是否生效，取决于实时尺寸对比。JS 动态增删菜单项后，Flex 容器可能不会自动重算溢出状态，得手动触发重排，比如改个 padding 或加个 transform: translateZ(0)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
