position: fixed侧边栏默认不滚动，因其脱离文档流并锚定视口，内容是否可滚动取决于自身是否同时满足：显式设置height/max-height、设置overflow-y: auto、子容器加min-height: 0防撑高。
为什么 position: fixed 侧边栏默认不滚动
因为 position: fixed 元素脱离文档流、锚定视口，但它的内容是否可滚动，完全取决于它自身是否具备「高度约束 + 溢出行为」。没设 height 或 max-height，又没写 overflow，浏览器就按内容自然撑高——此时根本不会出现滚动条。
必须同时满足的三个条件
让固定侧边栏局部滚动，缺一不可：
-
height或max-height必须显式设置（推荐用height: 100vh或max-height: calc(100vh - 60px)） -
overflow-y: auto（或scroll）要加在侧边栏元素本身，不是它的父容器 - 避免子元素触发最小尺寸保护：若侧边栏内有 Flex/Grid 容器，其直接子项可能因
min-width: auto撑开高度，需手动加min-height: 0到该子容器
inset 和传统四值定位哪个更稳
inset: 0 74vw 0 0 写法简洁，但兼容性限于 Chrome 58+/Firefox 65+/Safari 14.1+；老版本 Safari 或某些 Android WebView 会忽略。生产环境建议降级为：
top: 0; bottom: 0; left: 0; width: 26vw;
这样既明确控制高度范围，又避免 inset 在部分环境下被解析为 inset: auto 导致高度塌陷。
立即学习“前端免费学习笔记（深入）”；
主内容区被遮挡？检查 margin-left 是否匹配
固定侧边栏不占文档流，主内容必须主动留白。常见错误是：
- 用
padding-left代替margin-left→ 侧边栏仍会覆盖文字 -
margin-left值和侧边栏宽度不一致（比如 CSS 里写width: 240px，JS 里却用26vw计算 margin） - 没重置
body { margin: 0 }，导致默认8px边距干扰对齐
最稳妥写法是：margin-left: calc(240px + 0.5rem)，与侧边栏 width 和 padding 严格对应。
侧边栏滚动失效时，90% 是高度没锁死或 overflow 没加对位置；剩下 10% 往往卡在子容器的 min-height 默认值上——这个细节在 DevTools 里看不见，只能靠加 min-height: 0 逐层试。
