侧边栏用 flex 布局最稳，父容器设 min-height: 100vh，侧边栏用 flex: 0 0 auto 或 250px，主内容用 flex: 1 加 min-width: 0；小屏改 flex-direction: column 并重置侧边栏 flex；禁用 calc(100vw - 250px) 和 height: 100%，改用 overflow-y: auto 与 max-height。
侧边栏用 flex 布局最稳，别碰 float 或 position: absolute
用 float 会导致主内容塌陷、响应断点难控制；position: absolute 会让侧边栏脱离文档流，无法随内容高度自适应。现代页面直接上 display: flex，父容器设 min-height: 100vh，子元素用 flex 分配宽度即可。
常见错误是只给侧边栏设 width: 250px，没约束主内容区域，结果在小屏下溢出或重叠。
- 侧边栏用
flex: 0 0 auto（不缩放、不拉伸、按内容宽）或flex: 0 0 250px（固定最小宽） - 主内容区用
flex: 1，自动占满剩余空间 - 加
min-width: 0到主内容区，防止内部长文本撑破布局
响应式断点里改 flex-direction 比隐藏侧边栏更自然
很多教程一到移动端就 display: none 侧边栏，再靠 JS 弹出菜单——这其实是放弃语义和可访问性。更合理的是在小屏下把布局从左右改为上下：
- 桌面端：
flex-direction: row，侧边栏左，主内容右 - 移动端（如
@media (max-width: 768px)）：flex-direction: column，侧边栏在上，主内容在下 - 这样无需 JS 控制显隐，屏幕阅读器能线性读取，打印样式也正常
注意：改方向后，原 flex: 0 0 250px 会变成“高 250px”，必须同步覆盖为 flex: 0 0 auto 或重置 height。
width: calc(100vw - 250px) 是陷阱，别用
有人试图手动算主内容宽度：width: calc(100vw - 250px)，但实际会出问题：
- 滚动条存在时，
100vw包含滚动条宽度（通常 17px），导致计算偏小，右侧留白 - 浏览器缩放或 zoom 变化时，
calc不如flex稳定 - 嵌套在
iframe或有 padding 的容器中时，基准值错乱
真正需要精确像素控制的场景极少，绝大多数情况 flex: 1 + min-width: 0 就够了。
侧边栏内容多时，用 overflow-y: auto 而不是 height: 100%
给侧边栏设 height: 100% 很危险——它依赖父级有明确高度，而 Flex 容器的高度常由子内容撑开，容易造成循环依赖或截断。
- 正确做法：保持侧边栏
height: auto，加overflow-y: auto和max-height: calc(100vh - 60px)（减去 header 高度） - 如果要用
100vh，务必确认 body 和 html 没额外 margin/padding，否则会溢出 - iOS Safari 对
vh的处理有偏差（地址栏收放影响），稳妥起见可用 JS 动态设style.height = window.innerHeight + 'px'，但仅当真有滚动卡顿才加
自适应侧边栏真正的难点不在宽度，而在高度边界与滚动行为的组合判断——这点容易被忽略，直到在 iPhone 上滑不动才发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
