如何实现固定宽+自适应宽两栏布局，内容溢出时页面正常滚动？

需求：

• 实现两栏布局：左侧固定宽度，右侧占满剩余视口宽度
• 两栏高度随各自内容自适应
• 当右侧栏内容高度超过视口时，整个页面可滚动以容纳内容

现有代码：

<div class="parent-div">
  <div class="fixed-width-column">
    <!-- content for fixed-width column -->
  </div>
  <div class="variable-width-column">
    <div class="sub-div-1">
      <!-- content for sub-div-1 -->
    </div>
    <div class="sub-div-2">
      <!-- content for sub-div-2 -->
    </div>
  </div>
</div>

.parent-div {
  display: flex;
  height: 100vh;
}

.fixed-width-column {
  width: 300px;
}

.variable-width-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sub-div-1 {
  height: 33%;
}

.sub-div-2 {
  height: 67%;
}

遇到的问题：当sub-div-2内容高度超过视口时，页面底部出现空白，无法正常滚动；尝试设置overflow-y: auto、height: 100%等方法均无效。

解决方案 #

问题根源在于给.parent-div设置了height: 100vh，这会强制父容器高度固定为视口高度，无法随内容撑开；同时子元素的百分比高度基于这个固定高度计算，导致内容溢出时无法推动页面滚动。

修改后的代码如下：

.parent-div {
  display: flex;
  min-height: 100vh; /* 保证容器至少占满视口高度，内容超出时自动撑开 */
}

.fixed-width-column {
  width: 300px;
}

.variable-width-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 右侧栏至少占满视口，内容超出时跟随父容器撑开 */
}

.sub-div-1 {
  flex: 1; /* 用flex-grow实现比例分配，替代百分比高度，内容不足时占对应比例，内容过多时自动撑开 */
}

.sub-div-2 {
  flex: 2; /* 对应原67%的比例，可根据需求调整数值 */
}

关键修改点： #

• 移除.parent-div的height: 100vh，改用min-height: 100vh，确保容器在内容不足时占满视口，内容超出时自动扩展高度
• 用flex-grow（即flex属性）替代子元素的百分比高度，既可以在内容不足时按比例分配高度，又能在内容过多时自动撑开容器，触发页面滚动
• 给.variable-width-column添加min-height: 100vh，保证右侧栏在左侧内容较小时也能占满视口高度

如果不需要子元素的比例分配，直接去掉.sub-div-1和.sub-div-2的flex属性即可，让它们完全随内容自适应高度。

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