答案：用flex: 0 0 280px设侧边栏、flex: 1; min-width: 0设主编辑区、父容器display: flex且禁用overflow: hidden，可防止挤压与滚动错位。
侧边栏视图在 HTML 编辑器中不是靠 JS 动态生成的，而是由语义结构 + CSS 布局 + 滚动行为三者共同决定的；改宽度、固定位置、响应式收起，全在 CSS 层级完成，JS 只负责状态切换。
怎么让文档大纲栏不挤压主编辑区
编辑器里侧边栏一动，主区域文字就撑破换行或滚动错位，根本原因不是 HTML 写错了，是 Flex 默认伸缩行为没切断。必须显式控制尺寸边界：
- 侧边栏容器（如
.outline-nav）设flex: 0 0 280px，比width: 280px更可靠——它禁止伸缩，避免内容拉扯变形 - 主编辑区（如
.editor-content）加flex: 1; min-width: 0;，min-width: 0是关键，否则长 URL 或无空格文本会强制撑开整行 - 父容器（如
.editor-layout）必须设display: flex，且不能带overflow: hidden——iOS Safari 下这会截断position: sticky效果 - 别用
body的margin-left避让侧边栏，缩放或 SSR 渲染时极易出错
为什么大纲栏滚动时“卡住不动”或“跳一下”
position: sticky 在真实编辑器场景中失效频率极高，问题不在属性本身，而在它对上下文极其敏感：
- 检查侧边栏所有上级元素的 computed styles，重点找
transform、perspective、will-change——只要任一祖先有这些值，sticky就会相对它定位，而非视口 - 确保
nav的直接父元素有min-height: 100vh，且没有overflow: hidden或contain: layout - iOS Safari 对
top: 0支持不稳定，建议用top: 1rem，并给内部容器加-webkit-overflow-scrolling: touch - 若必须保留父级
transform（如动画需求），改用position: sticky+top: 1rem替代fixed，但需确保滚动容器高度明确
移动端收起侧边栏后键盘焦点和读屏器还能访问吗
只用 display: none 或 opacity: 0 收起，等于把整个导航区域从可访问性流中彻底删除。正确做法是视觉隐藏 + 语义控制双保险：
立即学习“前端免费学习笔记（深入）”；
- CSS 用
position: absolute; clip-path: inset(100%)或clip: rect(1px, 1px, 1px, 1px)隐藏但不移出流 - HTML 同步加
aria-hidden="true"和inert（现代浏览器已支持），确保读屏器跳过、键盘 Tab 不停驻 - JS 切换时，记得给
body加overflow: hidden，防止背景内容还能滚动 - 收起动画优先用
transform: translateX(-100%)，避免left触发重排，低端安卓机上尤其明显
侧边栏该用 nav 还是 aside？
文档侧边栏本质是导航行为，不是补充说明——所以必须用 nav，不是 aside。用错标签，屏幕阅读器直接跳过整个区块：
-
nav是原生导航地标，天然带role="navigation"，支持键盘 Tab 跳转；aside只适合嵌在article内的术语解释、作者简介等非导航内容 -
nav必须包含ul+li+a结构，每个a的href必须指向对应id，否则键盘用户无法跳转 - 当前激活项必须手动设
aria-current="page"，JS 切换时要清除上一个、设置当前，不能依赖:target或仅靠 CSS 类 - 多个导航区共存（如页头 + 侧边栏）时，分别加
aria-label，例如aria-label="文档目录导航"
真正难的不是写代码，是判断哪个样式正在覆盖你设的 width：用开发者工具查 Computed 面板里的 width 和 max-width，再顺藤摸到源头规则——很多模板里 max-width: 250px 早就在那儿等着了。
