flex布局下wrapper div设overflow:auto仍无法滚动的解决方法

问题出在Flex布局的默认行为上：Flex容器（.wrapper）默认会让子元素（.container）自动收缩（flex-shrink: 1），以此适应容器宽度。哪怕所有子元素的总宽度超过容器，它们也会被压缩到能放下的尺寸，不会产生横向溢出，自然触发不了滚动。

修复方法 #

给子元素添加flex-shrink: 0，禁止它们自动收缩，这样当总宽度超出容器时，就会产生溢出，overflow: auto就能生效，出现横向滚动条。

修改后的完整代码：

CSS #

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: left;
  column-gap: 10px;
  width: 100%;
  height: 30vh;
  overflow: auto;
  background-color: gold;
}

.container {
  width: 100px;
  height: 100%;
  background-color: darkcyan;
  flex-shrink: 0; /* 关键：禁止子元素收缩 */
}

HTML #

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

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