滚动div中Flex布局列背景高度异常问题求助

这个问题我之前也碰到过，核心原因是当你给Flex容器设置overflow: auto/scroll后，容器本身变成了滚动容器，它的子列元素的高度默认只会匹配容器的可视区域高度，不会跟着滚动内容的总高度延伸，所以背景就只显示到你能看到的那部分，滚动下去就断了。下面给你两个靠谱的解决办法：

方案1：把滚动逻辑转移到列内部（推荐） #

这个方案结构更清晰，维护起来也简单——让Flex容器负责布局，把滚动的任务交给每一列内部的内容容器，这样列的高度会自动被内容撑满，背景自然就覆盖到最底部了。

示例代码 #

<div class="flex-container">
  <div class="column yellow">
    <div class="content">
      <!-- 这里放你的大量内容 -->
      <p>测试内容...</p>
      <p>测试内容...</p>
      <!-- 重复足够多的行让内容超出高度 -->
    </div>
  </div>
  <div class="column green">
    <div class="content">
      <!-- 另一列的大量内容 -->
    </div>
  </div>
</div>

.flex-container {
  display: flex;
  height: 400px; /* 容器的可视高度，根据需求调整 */
}

.column {
  flex: 1; /* 让两列平分宽度 */
  padding: 1rem;
}

.yellow {
  background-color: #fff3cd; /* 黄色背景 */
}

.green {
  background-color: #d4edda; /* 绿色背景 */
}

.content {
  height: 100%; /* 撑满列的高度 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

方案2：保持Flex容器滚动，用背景属性修复 #

如果因为某些原因必须让Flex容器本身作为滚动容器，可以用CSS的背景附着属性来让背景跟着内容滚动，而不是局限在容器的可视区域。

示例代码 #

.flex-container {
  display: flex;
  height: 400px;
  overflow-y: auto; /* 容器本身滚动 */
}

.column.yellow {
  flex: 1;
  padding: 1rem;
  /* 用线性渐变模拟纯色背景，结合local属性让背景跟着内容走 */
  background: linear-gradient(#fff3cd, #fff3cd);
  background-size: 100% 100%;
  background-attachment: local;
}

.column.green {
  flex: 1;
  padding: 1rem;
  background: linear-gradient(#d4edda, #d4edda);
  background-size: 100% 100%;
  background-attachment: local;
}

这里的background-attachment: local是关键，它会让背景附着在滚动的内容上，而不是容器的可视窗口，所以滚动时背景会一直延伸到内容底部。

内容的提问来源于stack exchange，提问作者Jakub Kolčář