Flex 容器在其项目最大宽度上增长

Question

我有彼此相邻的弹性容器，我希望这些容器中的项目以相同的方式增长和收缩。 除了其中一个容器中的项目太少而无法缩小其元素的情况外，我有点让它工作了。 我目前的问题是 flex 容器正在增长超过其项目的最大宽度总和（第一种情况显示在下面的屏幕截图中）。

<div class="main-container">
  <div class="container">
    <div class="item">1</div>
  </div>
  <div class="container">
    <div class="item">1</div>
  </div>
</div>

.main-container {
  display: flex;
  overflow-x: auto;
  flex: 0 1 auto;
  
  /*irrelevant*/
  border-radius: 0.75rem;
  background-color: #fef3c7;
  padding: 1rem;
}

.container {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  
  /*irrelevant*/
  border-radius: 0.75rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.item {
  display: flex;
  min-width: 24rem;
  max-width: 30rem;
  flex: 1 1 auto;
  
  /*irrelevant*/
  background-color: rgba(245,158,11,1);
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #FFF;
  height: 4rem;
  border-radius: 0.75rem;
  margin-right: 1rem;
  margin-left: 1rem;
}
 /*irrelevant*/
.main-container .container:nth-child(2) .item {
  background-color: rgba(59,130,246,1);
}

这是 CodePen

正确的行为是，如果没有足够的空间，所有容器中的所有项目都将缩小到它们的最小宽度，然后最终溢出，并在有空间时增长到相同的大小。

我的 MS Paint“绘图”可能会更好地解释问题（点击放大）：

顺便说一句，出于后端 + JS 的原因，项目必须位于单独的容器中。

Answer 1

尝试将flex: 1 1 auto更改为flex: 1 1 1否则它会抓取所有似乎超过最大宽度的可用空间。

Answer 2

更多关于 CSS 的信息，我发现有很多display选项。 将.container显示更改为contents时，它可以完美运行。