这个问题在这里已有答案：

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

我在堆栈溢出中找到了其他问题来设置容器的高度 . 这在我的情况下是不可能的 .

enter image description here

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

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

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

Codepen

.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%;
}

<div class="outer">
  <div class="inner_featured"></div>
  <div class="inner"></div>
  <div class="inner"></div>    
</div>
html css css3 flexbox