CSS父/子div overflow布局问题：固定列表与滚动列表同步滚动修复

我来帮你搞定这个布局需求！你的核心诉求是左侧label列表固定、content列表支持横向滚动，且整个容器的垂直滚动要让两个列表同步。原代码的问题出在滚动容器的层级设置和定位逻辑上，下面是具体的修复方案：

问题根源分析 #

• 原容器#container作为flex容器设置了overflow-y: auto，但#contentList的overflow-x: scroll会让它变成一个独立的垂直滚动容器，导致在content内滚动时无法同步label的滚动。
• 没有给label列表设置固定定位，所以容器垂直滚动时label会跟着一起移动，无法保持左侧固定。

修复方案 #

我们需要调整滚动容器的层级，结合position: sticky实现左侧固定，同时让垂直滚动统一由外层容器控制：

1. 外层容器#container负责垂直滚动，设置overflow-y: auto，并改为相对定位，内部用一个宽度自适应的flex容器来承载两个列表。
2. 给#labelList添加position: sticky和left: 0，确保它在容器滚动时固定在左侧。
3. #contentList仅保留overflow-x: auto，让它只处理横向滚动，垂直滚动交给外层容器。

修改后的完整代码 #

CSS部分

#container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow-y: auto;
  position: relative;
}

.inner-wrapper {
  display: flex;
  width: fit-content; /* 让内部flex容器宽度自适应内容，保证content能横向滚动 */
}

#labelList {
  flex: 0 0 100px;
  background-color: dodgerblue;
  position: sticky;
  left: 0; /* 固定在左侧 */
}

#contentList {
  flex: 0 0 auto;
  background-color: lightgray;
  overflow-x: auto;
  min-width: calc(200px - 100px); /* 保证content在容器内至少占剩余宽度 */
}

.row {
  height: 50px;
  white-space: nowrap; /* 确保长文本不换行，触发横向滚动 */
}

HTML部分

<div id="container">
  <div class="inner-wrapper">
    <div id="labelList">
      <div class="row">label</div>
      <div class="row">label</div>
      <div class="row">label</div>
      <div class="row">label</div>
    </div>
    <div id="contentList">
      <div class="row">super super super super super duper long text</div>
      <div class="row">super super super super super duper long text</div>
      <div class="row">super super super super super duper long text</div>
      <div class="row">super super super super super duper long text</div>
    </div>
  </div>
</div>

关键细节解释 #

• .inner-wrapper的width: fit-content确保它能容纳content的长内容，不会被外层容器宽度限制，这样content才能横向滚动。
• #labelList的position: sticky是核心，它会在容器滚动时保持在视口左侧，同时跟随垂直滚动（因为sticky元素是相对于滚动容器定位的）。
• #contentList的min-width保证在内容较短时，也能占满容器剩余宽度，避免布局错乱。

这样修改后，就能完美实现你要的三个需求：label固定左侧、content横向滚动、垂直滚动时两者同步。

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