Flexbox中overflow属性失效问题及解决方案咨询

问题复现代码 #

原CSS代码：

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  background: #dedede;
  padding: 48px;
}

#app {
  display: flex;
  width: 100%;
}
.box-1 {
  border: 1px solid red;
}
.box-2 {
  padding: 10px;
  border: 1px solid blue;
  flex: 1;
}
.overflow-container {
  padding: 10px;
  width: 100%;
  border: 1px solid green;
  overflow: auto;
}

.overflow-content {
  width: 100%;
  min-width: 2000px;
  border: 1px solid pink;
}

原HTML代码：

<div id="app">
      <div class="box-1">This is 1</div>
      <div class="box-2">
        This is 2
        <div class="overflow-container">
          <div class="overflow-content">This is my overflow content</div>
        </div>
      </div>
    </div>

问题原因 #

Flex子元素（此处为.box-2）默认min-width值为auto，这意味着它会优先适配子元素的最小内容宽度，不会主动收缩。因此即便.overflow-container设置了overflow: auto，超长的.overflow-content仍会撑开.box-2，进而撑大整个flex容器，导致滚动条无法触发。

解决方案 #

给.box-2添加min-width: 0，打破flex子元素的最小宽度限制，让它可以收缩到容器的可用宽度内。这样.overflow-container的width: 100%就能基于父元素的可用宽度计算，超长内容会正常触发横向滚动。

修改后的CSS代码：

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  background: #dedede;
  padding: 48px;
}

#app {
  display: flex;
  width: 100%;
}
.box-1 {
  border: 1px solid red;
}
.box-2 {
  padding: 10px;
  border: 1px solid blue;
  flex: 1;
  min-width: 0; /* 关键修改 */
}
.overflow-container {
  padding: 10px;
  width: 100%;
  border: 1px solid green;
  overflow: auto;
}

.overflow-content {
  width: 100%;
  min-width: 2000px;
  border: 1px solid pink;
}

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