Html Flex容器的最大宽度超过其项

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

1.
1.
.主货柜{
显示器：flex；
溢出-x：自动；
flex:01自动；
/*无关的*/
边界半径：0.75雷姆；
背景色：#fef3c7；
填充：1rem；
}
.集装箱{
显示器：flex；
弯曲方向：行；
flex:1自动；
/*无关的*/
边界半径：0.75雷姆；
右边距：1rem；
左边距：1 em；
}
.项目{
显示器：flex；
最小宽度：24rem；
最大宽度：30雷姆；
flex:1自动；
/*无关的*/
背景色：rgba（245158,11,1）；
对齐项目：居中；
证明内容：中心；
字体大小：1.5rem；
线高：2rem；
颜色：#FFF；
身高：4rem；
边界半径：0.75雷姆；
右边距：1rem；
左边距：1 em；
}
/*无关的*/
.主容器.容器：第n个子容器（2）.项目{
背景色：rgba（59130246,1）；
}

正确的做法是，如果没有足够的空间，所有容器中的所有项目都会收缩到其最小宽度，然后最终溢出，如果有足够的空间，则会增长到相同的大小

我的MS绘制“绘图”可能会更好地解释问题（单击以缩放）：

---

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

尝试将

flex:11 auto

更改为

flex:11

，否则它会占据所有看起来超过最大宽度的可用空间。

我读了更多关于CSS的内容，我发现有很多

显示

选项。将

.container

显示更改为

contents

时，效果非常好。

谢谢@ZedRei，这是我尝试过的方法之一。这有点可行，但副作用是，当有空间放置时，项目不会增长到其最大宽度，它们将被固定在最小宽度处。我将main.container更改为0 1 1，将容器和项目更改为1 1 0。单个项目似乎增长到了最大值。再次感谢@ZedRei我不确定您指的是“.container”是哪一个，所以我尝试了这两个，正如您在第一个项目中看到的，它确实增长到了最大宽度，但容器之间的间隙仍然存在，在第二个项目中没有间隙，但项目保持在最小值。无论如何，感谢您的时间：）

<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);
}