无需固定高度实现适配可变Navbar的可滚动Flexbox子元素

核心思路是利用flexbox的剩余空间分配特性，完全避免依赖固定高度值或calc()，自动适配外部导航栏的动态高度，同时消除全局滚动条。

修正后的代码实现 #

CSS

/* 全局布局重置，让body和html占满视口并使用flex垂直布局 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 外部导航栏，无需修改，保留原样式 */
.navbar {
  display: flex;
  height: 50px; /* 高度可动态变化，我们无需关心 */
  background-color: red;
}

/* 容器改为flex:1，自动填充导航栏下方的剩余空间 */
.container {
  display: flex;
  flex-direction: column;
  flex: 1; /* 关键：占据父容器的剩余空间 */
  background-color: blue;
  min-height: 0; /* 确保子项能正确收缩，避免内容溢出时布局失效 */
}

.panel_top {
  background-color: grey;
  width: 100%;
  height: 30px;
}

/* 中间容器用于分配剩余空间给滚动面板 */
.panel_wrapper {
  flex: 1;
  min-height: 0; /* 必须设置，否则flex子项不会收缩 */
}

.panel_right {
  width: 100px;
  background-color: green;
  height: 100%; /* 占满父容器的高度 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

HTML

<body>
  <div class="navbar">
    <li>navbar item</li>
    <li>navbar item</li>
    <li>navbar item</li>
  </div>
  <div class="container"> <!-- 修正原错误：将style="container"改为class="container" -->
    <div class="panel_top">panel_top</div>
    <div class="panel_wrapper"> <!-- 新增wrapper用于分配剩余空间 -->
      <div class="panel_right">
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
        <h1>panel_right</h1>
      </div>
    </div>
  </div>
</body>

关键逻辑说明 #

1. 全局flex布局：html和body设置为flex-direction: column并占满视口高度，此时navbar自动占据自身高度，剩余空间由container通过flex:1获取，彻底避免100vh导致的全局滚动条问题。
2. 子项收缩控制：给container和panel_wrapper添加min-height: 0，这是flex布局的关键细节——默认情况下flex子项不会收缩到自身内容高度以下，设置后才能让滚动面板正确填充剩余空间。
3. 滚动面板适配：panel_right直接用height:100%继承父容器高度，搭配overflow-y:auto，内容超出时自动显示滚动条，完全不需要依赖任何硬编码高度值。

内容的提问来源于stack exchange，提问作者Alex Mortez