Html 如何在具有flex box的div中分配具有不同高度的div？

我想知道是否有一种方法可以在flex div中对齐div，如图所示。我知道我可以尝试使用flex-wrap和justify内容，但是外部div的宽度应该与它们的孩子一起扩展，flex-wrap和justify内容假设我有一个固定的宽度和高度

我在设置容器高度的堆栈溢出中发现了其他问题。这在我的情况下是不可能的

我一直在试着像图中那样把这三个部门分开。红色的更大，应该会扩大父对象的高度。另外两个较小，应该只适合一个“列”

最后，外部div应该将其宽度扩展到其子级的宽度。现在你可以看到外面的div更大了

以下是我迄今为止所做的工作：

.outer{
背景：#00a2e8；
显示器：flex；
}
.内部{
高度：192px；
宽度：350px；
背景：#22ae4c；
利润底部：2.72%；
}
.内部+.内部{
背景#fff200；
页边距底部：0；
}
.内景{
高度：416px；
宽度：730px；
背景：#ed2624；
页边距底部：0；
右边距：2.72%；
}

@Michael_B正如我在问题中所解释的，我无法设置容器的高度。我将研究它。我立即想到了CSS网格解决方案。可能会让你知道什么是可能的。不完全是您需要的，但值得玩玩。@EGS我还记得它帮助我对网格有了相当好的理解。这很快就可以完成，而且会真正帮助你了解这一切。这个问题还没有得到回答。我有一个类似的问题，除了我有许多宽度相同但高度不同的div（它们是表单控件），我想自动排列它们。