如何实现左侧Div内容超出右侧Div高度时滚动的Flexbox布局

需求说明 #

• 右侧Div高度由自身内容决定
• 左侧Div高度自动匹配右侧Div的高度
• 左侧内容超出右侧高度时可滚动，右侧始终无滚动条，内容过多时容器整体增高

当前代码 #

CSS 代码 #

.main-container {
  display: flex;
  width: 60%;
  border: 2px solid #333;
  align-items: stretch; /* Ensures both divs stretch to the same height */
}

.left-div, .right-div {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
}

.left-div {
  background-color: #e3f2fd;
  overflow-y: auto; /* Should scroll if content exceeds right div's height */
}

.right-div {
  background-color: #ffeb3b;
  overflow: hidden; /* No scroll on the right div */
}

ul {
  list-style-type: none;
  padding: 0;
}

HTML 代码 #

<div class="main-container">
  <div class="left-div">
    <h3>Left Div (scrolls if content exceeds)</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
  </div>

  <div class="right-div">
    <h3>Right Div</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
    </ul>
  </div>
</div>

解决方案 #

原代码的问题在于align-items: stretch会让容器高度由最高的子元素（左侧）决定，无法实现右侧内容主导高度的效果。调整后的代码如下：

修改后的 CSS #

.main-container {
  display: flex;
  width: 60%;
  border: 2px solid #333;
}

.left-div, .right-div {
  padding: 20px;
  border: 1px solid #ccc;
  flex: 1; /* 保持左右宽度均分 */
}

.left-div {
  background-color: #e3f2fd;
  flex: 1 1 0; /* 关键：设置flex-basis为0，让高度受容器限制 */
  overflow-y: auto; /* 内容超出时垂直滚动 */
}

.right-div {
  background-color: #ffeb3b;
  /* 移除overflow: hidden，让内容自然撑开容器高度 */
}

ul {
  list-style-type: none;
  padding: 0;
}

关键调整说明 #

1. 移除align-items: stretch，通过左侧的flex-basis: 0改变高度计算逻辑
2. 左侧Div设置flex: 1 1 0，使它的高度被容器高度限制，而容器高度由右侧内容决定
3. 移除右侧Div的overflow: hidden，确保内容过多时容器整体增高
4. 保留flex:1实现左右宽度均分

这样就能完全满足需求：右侧高度由自身内容决定，左侧高度匹配右侧，左侧内容超出时滚动，右侧始终无滚动条且内容过多时容器自动增高。

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