使用flexbox进行网格定位

Question

我使用flexbox可以实现以下简单网格。

* {
  color: white;
}
.blue {
  background-color: #00003b;
}
.green {
  background-color: #002700;
}
.red {
  background-color: #800000;
}
.purple {
  background-color: #1e001e;
}
.container {
  width: 600px;
  margin: 0 auto;
  display: flex;
}
.container > div {
  display: flex;
}
.elemUno {
  width: 300px;
  height: 200px;
}
.elemDos {
  width: 300px;
  height: 100px;
}
.elemTres {
  width: 300px;
  height: 100px;
}

<div class="container blue">
  <div class="elemUno left red">
    Elem 1
  </div>
  <div class="elemDos left green">
    Elem 2
  </div>
</div>
<div class="container blue">
  <div class="elemTres left purple">
    Elem 3
  </div>

</div>

我想要的是拥有一个div，几乎使用蓝色空间AS A DIV而不会破坏行高。这可能吗？提前谢谢！