如何实现并排div独立滚动及右侧容器内子div独立滚动

问题根因 #

1. 未给.right容器设置flex布局，内部.first和.second默认是纵向堆叠的块级元素，你给.first设置的flex:1 1规则完全不生效，布局和你预期的横向排列不符
2. .right容器自身开启了overflow-y: auto，滚动行为作用在整个right容器上，内部两个子元素会跟随整体滚动，无法独立控制
3. flex容器默认align-items: stretch，如果开启flex布局子元素会被默认拉伸到和容器同高，这就是你遇到的second占用right全部高度的核心原因
4. 未给需要滚动的子元素设置独立的overflow规则和高度限制，无法实现独立滚动

修复后的完整代码 #

CSS部分

.main {
  display: flex;
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  width: 100vw;
  height: 100%;
  background: #f7f7f7;
}

.left {
  flex-grow: 1;
  height: 90vh;
  position: static;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: blue;
}

.right {
  flex-grow: 1;
  height: 90vh;
  /* 新增：设置right为横向flex布局 */
  display: flex;
  /* 新增：取消默认拉伸，子元素高度自适应内容 */
  align-items: flex-start;
  /* 移除right自身滚动，交给内部子元素控制 */
  overflow-y: hidden;
  overflow-x: hidden;
}

.first {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 900px;
  flex: 1 1;
  background-color: yellow;
  /* 新增：高度占满right容器，超出内容独立滚动 */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.second {
  width: 467px;
  background-color: #2b2f3e;
  flex: none;
  /* 新增：最大高度不超过right容器，内容超出时独立滚动，不超出则自适应内容高度 */
  max-height: 100%;
  overflow-y: auto;
}

HTML部分无需改动

<div class="main">
  <div class="left">
    <h1>Left</h1>
    <p>Data</p>
  </div>
  <div class="right">
    <h1>Right</h1>
    <div class="first">
      <h2>First</h2>
      <p>Data</p>
    </div>
    <div class="second">
      <h2>Second</h2>
      <p>Data</p>
    </div>
  </div>
</div>

效果说明 #

• first和second改为横向排列，两个区域滚动完全独立，互不干扰
• second高度自适应自身内容，不会被拉伸到占满right容器，滚动到内容底部后自动停止
• first占满right剩余高度，内容超出时可独立持续滚动

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