如何在flex-wrap触发时消除CSS双重滚动问题？

我做了一个双栏布局：左侧栏固定，右侧栏可独立滚动；当浏览器宽度足够小时，两栏会自动换行变成单栏布局。但切换成单栏后，右侧栏还保留着独立滚动的行为，同时外层容器也能滚动，出现了双重滚动的问题。

我的需求是：单栏布局时，左侧栏也加入整体滚动，整个页面只保留一个滚动条。

原布局的CSS代码如下：

.container {
  background: linear-gradient(0deg, forestgreen 0%, black 100%);
  display: flex;
  flex-wrap: wrap;
  height: 90vh;
  padding: 15px;
  overflow: auto;
}

.left-fixed {
  background-color: lightpink;
  flex: 1;
  min-width: 400px;
  height: 100%;
}

.right-scroll {
  flex: 1;
  min-width: 400px;
  height: 100%;
  overflow: auto;
}

.big-content {
  height: 3000px;
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

我发现把右侧栏的overflow设为visible就能模拟出理想的单栏效果，但不想用JavaScript去检测宽度切换样式，觉得太繁琐。

纯CSS解决方案 #

不需要JS，用媒体查询就能实现需求：

1. 先计算单栏触发的临界宽度：两个栏的min-width总和是800px，加上容器左右的padding（共30px），所以临界宽度设为830px。
2. 在媒体查询中针对单栏布局修改样式：
   • 让左侧栏高度自适应，不再固定占满容器高度
   • 取消右侧栏的独立滚动，让它的内容融入容器的整体滚动

修改后的完整CSS代码：

.container {
  background: linear-gradient(0deg, forestgreen 0%, black 100%);
  display: flex;
  flex-wrap: wrap;
  height: 90vh;
  padding: 15px;
  overflow: auto;
}

.left-fixed {
  background-color: lightpink;
  flex: 1;
  min-width: 400px;
  height: 100%;
}

.right-scroll {
  flex: 1;
  min-width: 400px;
  height: 100%;
  overflow: auto;
}

.big-content {
  height: 3000px;
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

/* 单栏布局样式 */
@media (max-width: 830px) {
  .left-fixed {
    height: auto;
  }
  .right-scroll {
    overflow: visible;
    height: auto;
  }
}

这样调整后，当视口宽度小于830px时，两栏自动换行，左侧栏高度随内容自适应，右侧栏取消独立滚动，整个页面只有外层容器的一个滚动条，完全符合需求。

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