如何使用弹性框在div内部分配不同高度的div？

Question

我想知道是否有一种方法可以在flex div中对齐div，就像在图片中一样。我知道我可以尝试使用flex-wrap和justify-content，但是外部div的宽度应该与他们的孩子一起使用，而flex-wrap和justify-content假设我有一个固定的宽度和高度。

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

我一直试图像图片中那样放置三个div。红色的一个更大，应该扩大父母的高度。另外两个较小，应该只适合一个＆＃34;列＆＃34;。

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

到目前为止，这是我所做的：

Codepen

＆＃13;

＆＃13;

.outer {
  background: #00a2e8;
  display: flex;
}

.inner {
  height: 192px;
  width: 350px;
  background: #22ae4c;
  margin-bottom: 2.72%;
}
.inner + .inner {
  background: #fff200;
  margin-bottom: 0;
}

.inner_featured {
  height: 416px;
  width: 730px;
  background: #ed2624;
  margin-bottom: 0;
  margin-right: 2.72%;
}

＆＃13;

<div class="outer">
  <div class="inner_featured"></div>
  <div class="inner"></div>
  <div class="inner"></div>    
</div>

＆＃13;

＆＃13;

＆＃13;