本文提供纯 CSS 方案，通过重构布局结构（用 position: fixed 容器包裹导航与主内容，并启用 Flex 布局），使动态宽度的垂直导航栏与 区域始终自适应、无重叠，兼容小屏幕设备，无需 JavaScript。
本文提供纯 css 方案，通过重构布局结构（用 `position: fixed` 容器包裹导航与主内容，并启用 flex 布局），使动态宽度的垂直导航栏与 `
在构建单页应用或文档型网站时，常需一个固定定位（position: fixed）的垂直侧边导航栏。但当导航栏宽度由内容决定（如使用 min-width: max-content）、且需适配移动端时，传统写法极易导致导航栏与主内容重叠——尤其在窄屏下，fixed 元素脱离文档流，无法被父容器 flex 排布约束，calc(100% - nav.width) 又因 CSS 不支持跨元素变量引用而失效。
核心思路：放弃对单个 nav 应用 fixed，转而将整个导航+主内容区域封装进一个 position: fixed 的 Flex 容器中。 这样既保留了“始终可见”的固定定位效果，又让 nav 和 main 成为同一 Flex 上下文中的兄弟元素，可自然响应式分配空间。
✅ 推荐实现方案（纯 CSS）
首先，移除原
<body>
<div class="page">
<nav id="navbar">...</nav>
<main>...</main>
</div>
</body>对应关键 CSS 如下：
.page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
overflow: hidden; /* 防止外容器滚动 */
}
nav {
/* 移除 position: fixed */
flex: 0 0 auto; /* 关键：禁止缩放，保持内容宽度 */
min-width: max-content; /* 动态宽度基础 */
width: 20%; /* 作为初始参考值，窄屏下仍以 min-width 为准 */
height: 100%;
padding: 1rem 0.5rem;
background-color: #5382a1;
font-family: Tahoma, sans-serif;
display: flex;
flex-direction: column;
}
main {
flex: 1; /* 自动填充剩余空间，避免硬编码 margin-left */
overflow-y: auto; /* 主内容独立滚动，不随导航滚动 */
height: 100%;
padding: 1rem;
margin-left: 1rem; /* 可选：增加导航与主内容间距 */
}? 为什么 flex: 0 0 auto 是关键？
它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto;，确保导航栏宽度严格由其内容（min-width: max-content）和初始设定（如 width: 20%）共同决定，不会被 Flex 压缩或拉伸，同时又能参与 Flex 布局计算，使 main 准确占据剩余空间。
? 响应式增强（可选）
为提升小屏体验，可添加媒体查询，在超窄视口下切换为顶部导航或汉堡菜单：
@media (max-width: 768px) {
.page {
flex-direction: column;
}
nav {
width: 100%;
min-width: auto;
flex: none;
}
main {
flex: 1;
margin-left: 0;
}
}⚠️ 注意事项
- 滚动行为分离：main 必须设置 overflow-y: auto（或 scroll），否则长内容会溢出且不可滚动；.page 则建议设 overflow: hidden，避免双滚动条。
- box-sizing 一致性：确保所有元素含 box-sizing: border-box，避免内边距/边框影响宽度计算。
- 无障碍与 SEO：导航仍保留在 DOM 顺序靠前位置，语义结构未破坏，对屏幕阅读器友好。
- 避免 margin-left 硬编码：原方案中 main { margin-left: 25% } 在导航变宽时必然失效；新方案中 flex: 1 天然规避此风险。
该方案已在 JSFiddle 中验证，支持从桌面到手机全尺寸响应，完全基于现代 CSS Flexbox，零 JavaScript 依赖，简洁、健壮、可维护。
