侧边栏加overflow: auto不滚动，根本原因是容器缺乏可滚动上下文：父容器未设明确高度（如100vh）、flex子项未设min-height: 0导致无法收缩、真正滚动的子容器未设height: 100%。
侧边栏独立滚动不是加个 overflow: auto 就能成的——90% 的失败都卡在高度没算对，或者 flex 子项没“收缩”。
为什么侧边栏加了 overflow: auto 还是不滚动？
常见现象：侧边栏内容溢出，但滚动条不出现，整个页面跟着一起滚。根本原因是容器没有「可滚动的上下文」。
- 父容器没设明确高度（比如
height: 100vh或min-height: 0），overflow失效 - 侧边栏本身是
position: fixed或absolute，脱离文档流后，高度默认由内容撑开，无法触发滚动 - Flex 容器里子项用了
flex: 1，但没配min-height: 0，导致它拒绝收缩，把内部滚动区域顶满
display: flex 下侧边栏滚动的三层结构怎么写？
必须嵌套三层才能稳住：外层控整体流向，中层分左右/上下，内层才负责滚动。少一层就容易错位或失效。
- 外层用
display: flex; flex-direction: column;（比如包头部 + 主体）或row（比如包侧边栏 + 内容区） - 中层（如主区域）设
flex: 1; min-height: 0;——这个min-height: 0是关键，IE11 必须写成flex: 1 1 0 - 侧边栏本身用
flex: 0 0 240px（固定宽）或width: 240px，避免被 flex 压缩 - 真正要滚动的子容器（比如导航列表）必须加
height: 100%，否则overflow不生效
侧边栏里有页脚/头部，怎么让中间内容独立滚动？
固定头尾 + 中间滚动，不能靠 calc() 硬减，要用 flex 的生长收缩逻辑。
- 侧边栏容器设
display: flex; flex-direction: column; - 头部和页脚用
flex-shrink: 0;+ 显式height（如height: 56px） - 中间导航区设
flex-grow: 1; overflow-y: auto; - 如果中间区里还有子容器（比如
<ul></ul>），它必须带height: 100%，不然滚动条出不来
移动端侧边栏滑出后滚动失效怎么办？
滑出的侧边栏常因定位方式和尺寸缺失导致滚动不可用，尤其在 iOS 上。
- 别用
left: -250px+transition，改用transform: translateX(-100%) - 侧边栏容器必须显式设
width和height（如width: 280px; height: 100vh;），不能靠子项撑开 - 滚动区域高度建议用
calc(100vh - 64px)（减去顶部导航高度），并确保父容器min-height: 0 - iOS Safari 下加
will-change: transform到容器上，防滚动抖动
真正卡住的点永远不在「要不要加 overflow」，而在「这个容器到底有没有高度、能不能收缩、它的子项有没有被 height: 100% 拉住」——三个条件缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
