Html 调整flex项目的大小以适应容器（防止项目溢出）

我一直在努力解决一个问题，我认为这将是一个非常简单的解决方案，但我现在看不到它。我有一个嵌套的flexbox布局。flex项的第一级是div，它们本身就是display:flex，根据类的不同，它们可以有一个flex directon:of行或列。这些嵌套flex项的第一级和第二级都应该增大，以填充剩余的父级大小，如果添加了新元素，则会缩小，而不会溢出

我的问题是：当向“第一级”添加新的flex项时，这似乎可以正常工作。但是，将新的flex项添加到第二级似乎总是超出父容器的高度

由于我不太擅长描述这样的东西，下面是我需要的图片： 紫色框是父容器（不是flex） 橙色框是具有flex-direction:row的flex容器，红线是其flex项（每个项也都是flex-box）。 蓝线是嵌套的弹性项

添加新的红色项目可以根据需要进行扩展或收缩，但添加新的蓝色项目会使容器溢出。

以下是我的代码示例： CSS

HTML

很抱歉描述混乱，我对这类事情很在行。

---

感谢您的帮助

我认为我们应该使用

flex:11 0

来修复flex项目的布局

并使用

width:100%

控制内部图像的大小

.page{
边框：3倍纯绿；
宽度：600px；
高度：300px；
}
.flex{
显示器：flex；
}
科尔斯先生{
显示器：flex；
弯曲方向：行；
}
.行{
显示器：flex；
弯曲方向：立柱；
}
.flex-1-1-0{
弹性：110；
}
.img部门{
弹性：110；
显示器：flex；
}
.img部门img{
宽度：100%；
}

---

我认为我们应该使用

flex:11 0

来修复flex项目的布局

并使用

width:100%

控制内部图像的大小

.page{
边框：3倍纯绿；
宽度：600px；
高度：300px；
}
.flex{
显示器：flex；
}
科尔斯先生{
显示器：flex；
弯曲方向：行；
}
.行{
显示器：flex；
弯曲方向：立柱；
}
.flex-1-1-0{
弹性：110；
}
.img部门{
弹性：110；
显示器：flex；
}
.img部门img{
宽度：100%；
}

我删除了以前的答案并添加了一个新答案，它应该可以解决这个问题：）嗨，你有没有检查过我更新的答案？它解决了你的问题吗？我已经删除了以前的答案并添加了一个新的答案，它应该可以解决这个问题：）嗨，你检查过我更新的答案吗？你的问题解决了吗？

  width: 1800px;
  height: 500px;
  border: 4px blue solid;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.flex-item {
  flex-grow: 1;
  flex-basis: 0;

  display: flex;
}

.flex-item > div {
  flex-grow: 1;
  border: 1px solid orange;
}

.height-1 {
  flex-direction: column;
  max-height: 100%;
}

.height-2 {
  max-height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  <div class="flex-container">

    <div class="height-2 flex-item">
      <div class="img-div">
        <img src="https://picsum.photos/1080/600" />
      </div>
    </div>

    <div class="height-1 flex-item">
      <div class="img-div">
        <img src="https://picsum.photos/1080/601" />
      </div>
      <div class="img-div">
        <img src="https://picsum.photos/1080/602" />
      </div>

    </div>
    </div>
  </div>