flex让它的子项缩小和增长

默认情况下，一个flex项（即flex容器中的子元素）可以灵活地增长或收缩，因此命名为"flexbox"。
在代码段中，即使指定了width: 100px;到.container元素，也没有指定其flex-grow或flex-shrink值。
尝试为.container指定一个特定的flex值，以阻止它们增长/收缩。

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

.container {
  height: 100%;
  flex: 0 0 100px;
  background-color: darkcyan;
}

<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>

您需要将flex-grow和flex-shrink设置为0以设置容器的收缩因子。请尝试将width: 100px替换为flex: 0 0 100px。

.container {
  flex: 0 0 100px;
  height: 100%;
  background-color: darkcyan;
}