Css 将flex容器高度设置为两个包含元素中的较小者

在这个问题被打上重复的印记之前，我在这个问题上找不到任何与我类似的有效答案。（如果我贴错了邮票，这样我就能看到那个链接，我将永远感激！）

---

如果我有一个包含两个元素的flex容器，默认情况下，容器的高度将始终默认为两个元素中较大的一个。我想将flex容器的高度设置为两个元素中较小的一个，并溢出两个元素中较大的一个。如何设置flex容器的高度以匹配较小元素的高度

如果任何人需要上述描述的基础，请提供一些代码：

html

<div class="container">
  <div class="small">
    <div>This is less content</div>
    <div>This is less content</div>
  </div>
  <div class="large">
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
    <div>random text</div>
  </div>
</div>

这里有一个可以使用的代码笔：

---

您可以在较大的元件上使用绝对定位

div.container{
显示器：flex；
位置：相对位置；
证明内容：柔性端；
}
小分区{
弹性：0.50%；
背景：红色；
}
大分区{
位置：绝对位置；
顶部：0；左侧：0；底部：0；
右：50%；
背景：蓝色；
溢出：自动；
}

随机文本
随机文本
随机文本
随机文本
随机文本
随机文本
这就不那么满足了
这就不那么满足了

谢谢，这很有效，但我把东西换了，较大的元素在左边。我让左边的部分工作（更大的内容）但是较小的内容现在也需要绝对定位？可能有问题，但我刚刚让另一个flex同级到ghost来代替绝对定位。@AndrewKim更新了我的答案以切换位置我正在处理的实际代码库一定有其他css影响定位，因为当我做你贴的东西时，他们只是坐在一起。我将不得不进一步研究它，但ghost flex兄弟目前正在工作。谢谢你的帮助！

div.container { 
  display: flex;
}

div.small {
  flex: 1;
  background: red;
}

div.large {
  flex: 1;
  background: blue;
  overflow: auto;
}