本文介绍一种不依赖 calc() 或预设像素值的纯 Flexbox 方案，使 .panel_right 在存在外部可变高度 .navbar 的情况下仍能自适应剩余空间并启用垂直滚动，彻底避免双滚动条问题。
本文介绍一种不依赖 `calc()` 或预设像素值的纯 Flexbox 方案，使 `.panel_right` 在存在外部可变高度 `.navbar` 的情况下仍能自适应剩余空间并启用垂直滚动，彻底避免双滚动条问题。
在构建嵌入式或第三方注入型 UI（如浏览器插件、侧边栏工具）时，常需将内容插入已有页面结构中。此时，顶部导航栏（.navbar）往往由宿主页面控制，其高度不可预测且可能随版本更新而变化。若强行用 calc(100vh - Xpx) 计算 .panel_right 高度，不仅脆弱易错，还会因浏览器渲染差异导致滚动异常或出现双重滚动条。
核心思路：放弃“绝对减法”，拥抱“弹性挤压”
Flexbox 的 flex: auto 与 min-height: 0 组合是解决此类问题的关键——它让容器在父级 Flex 容器中自动分配剩余空间，并允许其子元素在内容溢出时正常触发 overflow-y: scroll，而无需知道兄弟元素的具体尺寸。
以下是推荐的完整 CSS 实现：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.navbar {
display: flex;
min-height: 50px; /* 兼容外部变化，用 min-height 更鲁棒 */
background-color: red;
}
.container {
display: flex;
flex-direction: column;
flex: auto; /* 关键：占据 body 剩余全部空间 */
background-color: blue;
min-height: 0; /* 关键：防止 flex 项撑开容器 */
}
.main {
flex: auto; /* 关键：让 .main 挤占 .container 中除 .panel_top 外的所有空间 */
min-height: 0; /* 关键：确保 .main 内部可收缩 */
display: flex;
flex-direction: column;
}
.panel_top {
background-color: grey;
min-height: 30px; /* 同样建议用 min-height 提升适应性 */
}
.panel_right {
width: 100px;
background-color: green;
overflow-y: scroll; /* 滚动在此生效 */
flex: auto; /* 占据 .main 全部可用高度 */
min-height: 0; /* 确保即使内容少，也不影响 flex 布局逻辑 */
}对应 HTML 结构需严格遵循嵌套层级：
<div class="navbar">
<li>navbar item</li>
<li>navbar item</li>
<li>navbar item</li>
</div>
<div class="container">
<div class="panel_top">panel_top</div>
<div class="main">
<div class="panel_right">
<h1>panel_right</h1>
<h1>panel_right</h1>
<!-- 更多内容... -->
</div>
</div>
</div>✅ 为什么这能工作？
-
body作为顶层 Flex 容器，将.navbar和.container视为两个 flex 项；.navbar有明确高度（或最小高度），.container设置flex: auto后自动填满剩余视口空间； -
.container内部，.panel_top占据固定最小高度，.main通过flex: auto+min-height: 0获得剩余空间； -
.panel_right作为.main的唯一子项，同样用flex: auto+min-height: 0，从而获得可滚动的、完全自适应的高度边界。
⚠️ 注意事项：
- 必须为所有参与 Flex 布局的中间容器（
.container、.main）显式设置min-height: 0，否则浏览器默认min-height: auto会阻止内容收缩，导致滚动失效； - 避免在
.navbar上使用height（应优先用min-height），以兼容其未来可能出现的高度波动； - 不要遗漏
box-sizing: border-box，防止内边距/边框破坏高度计算； - 此方案完全脱离 JavaScript，零运行时开销，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2018）。
通过这套声明式布局策略，你不再需要监听窗口大小、查询 DOM 高度或维护硬编码数值——Flexbox 会自动为你完成所有尺寸协商，让 .panel_right 真正“智能滚动”。
