Flexbox设置overflow-x:scroll后子元素致容器宽扩而非滚动问题

我用Flexbox定义了布局，希望右侧按钮处于水平滚动元素中：

期望效果：右侧按钮区域固定宽度，按钮数量超出时可水平滚动

但添加更多按钮时，容器未滚动反而宽度扩张：

问题效果：添加更多按钮后，右侧容器宽度被撑大，未触发水平滚动

相关代码 #

HTML：

<div class="container">
  <main>
  </main>

  <aside>
    <section>
        <button>button 1</button>
        <button>button 2</button>
        <button>button 3</button>

        <!-- 添加更多按钮会导致容器宽度扩张而非滚动 -->
        <!--
        <button>button 4</button>
        <button>button 5</button>
        -->
    </section>

  </aside>
</div>

SCSS：

.container {
  display: flex;
  flex-direction: row;
  height: 90vh;

  main {
    background: lightblue;
    flex: 0 0 40vw;
  }
}

aside {
  background: lightcoral;
  flex: 0 0 40vw;

  section {
    display: flex;
    overflow-x: scroll;

    button {
      width: 150px;
      height: 20px;
    }
  }
}

问题原因及解决方法 #

问题根源在于Flex布局的默认特性：

1. Flex子元素（此处为aside）默认不会限制内部元素宽度，当section内按钮总宽度超过aside的40vw时，会触发flex的扩张行为
2. section作为flex容器，其子元素默认min-width: auto，会阻止容器收缩，导致宽度被内容撑大

只需做两处修改：

• 给aside添加overflow: hidden，强制限制内部元素不能超出其宽度范围
• 给section添加min-width: 0，打破flex子元素的最小宽度限制，让容器在内容超出时触发水平滚动

修改后的SCSS代码：

.container {
  display: flex;
  flex-direction: row;
  height: 90vh;

  main {
    background: lightblue;
    flex: 0 0 40vw;
  }
}

aside {
  background: lightcoral;
  flex: 0 0 40vw;
  overflow: hidden; /* 限制内部元素不超出aside宽度 */

  section {
    display: flex;
    overflow-x: scroll;
    min-width: 0; /* 允许容器收缩，触发滚动 */
    flex-wrap: nowrap; /* 确保按钮不换行（默认值，可省略） */

    button {
      width: 150px;
      height: 20px;
    }
  }
}

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