本文详解如何修复 Flex 布局中左侧固定宽度栏（.left-section）滚动条无法覆盖全高、内容截断的问题，核心在于正确设置视口高度继承链、容器弹性行为及溢出控制。
本文详解如何修复 flex 布局中左侧固定宽度栏（`.left-section`）滚动条无法覆盖全高、内容截断的问题，核心在于正确设置视口高度继承链、容器弹性行为及溢出控制。
在构建双栏独立滚动布局（如导航栏 + 主内容区）时，一个常见问题是：左侧栏设置了 overflow-y: auto，但滚动条只覆盖部分区域，无法滚动到底部链接（如示例中的 “Link 18” 仅显示一半），甚至在窗口缩小时才出现——这并非浏览器 Bug，而是 CSS 高度计算链断裂所致。
根本原因在于：原始代码中
✅ 正确解法需建立三层高度继承闭环：
- 根级高度锚定：将 html, body 设为 height: 100dvh（推荐 dvh 而非 vh，避免 iOS Safari 地址栏遮挡问题）；
- body 弹性化：body { display: flex; flex-direction: column; }，使 header 和 .container 成为弹性子项；
- 容器占满剩余空间：.container { flex: 1; overflow: hidden; } —— flex: 1 等价于 flex: 1 1 0，强制其撑满 body 剩余高度；
- 子栏明确尺寸与溢出：.left-section 使用 flex: 0 0 30%（不伸缩、不收缩、基础宽度30%），并设 height: 100% + overflow: auto，确保滚动区域严格匹配父容器高度。
以下是优化后的完整代码（含关键注释）：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
/* 重置与基础设定 */
* { margin: 0; box-sizing: border-box; }
html, body {
height: 100dvh; /* 动态视口高度，兼容移动端地址栏变化 */
}
body {
display: flex;
flex-direction: column;
overflow: hidden; /* 隐藏全局滚动条，交由子容器控制 */
}
.container {
flex: 1; /* 占满 body 剩余空间 */
display: flex;
overflow: hidden; /* 防止 container 自身溢出产生额外滚动条 */
}
.left-section {
flex: 0 0 30%; /* 固定宽度占比，不随容器伸缩 */
padding: 1rem;
background-color: #f0f0f0;
overflow: auto; /* 关键：启用独立纵向滚动 */
height: 100%; /* 继承 container 的完整高度 */
a {
display: block;
padding: 0.5rem 0; /* 推荐用 padding 替代 margin，提升点击热区 */
text-decoration: none;
color: #0066cc;
}
}
.right-section {
flex: 1; /* 自适应剩余宽度 */
padding: 1rem;
background-color: #e0e0e0;
overflow: auto;
height: 100%;
}<header>
<h1>Welcome</h1>
<p>This is the banner section of the page.</p>
</header>
<div class="container">
<div class="left-section">
<h3>Links</h3>
<!-- 20个链接保持不变 -->
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<!-- ... 中间链接省略 ... -->
<a href="#">Link 20</a>
</div>
<div class="right-section">
<!-- 示例长内容触发滚动 -->
<p style="height: 200vh; margin: 0;">Scrollable content area...</p>
</div>
</div>⚠️ 注意事项：
- 避免在 .left-section 内使用 margin-bottom 控制链接间距（易引发滚动边界计算误差），统一改用 padding；
- 若项目需兼容旧版浏览器（如 IE），100dvh 可降级为 100vh，但需手动处理 iOS Safari 视口缩放问题；
- overflow: hidden 在 body 上非必需，但能防止意外全局滚动，增强布局可控性；
- 当右侧内容高度不足时，.right-section 滚动条不会出现——这是预期行为，符合“独立滚动”设计目标。
通过以上调整，.left-section 的滚动条将始终覆盖其完整分配高度（即 body 减去 header 后的全部空间），所有链接均可平滑滚动至可视区域，彻底解决截断与延迟显示问题。
