Flexbox 项目溢出容器高度

Question

我正在使用 Flexbox 为我的网站制作布局，其中我希望左侧的两个项目 item-1 和 item-3 相互堆叠，右侧的一个项目占用容器的整个高度。我遇到的问题是，当我将 item-2 的高度更改为 100% 时，flex 容器的高度也会发生变化。

* {
  margin: 10px;
}

.container {
  background: grey;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

.item-1 {
  width: 30%;
  background: blue;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

.item-2 {
  width: 60%;
  background: green;
  height: 100px;
  border: 1px solid black;
  font-size: 18px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

.item-3 {
  width: 30%;
  background: blue;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

<div class="container">
  <div class="item-1">Item-1</div>
  <div class="item-2">Item-2</div>
  <div class="item-3">Item-3</div>
</div>

有很多关于堆栈溢出的答案，比如 this 一个关于类似问题的答案，但他们使用 <hr> 或空容器作为换行符，给它们 width: 100%; height: 0。我试过了，但没有一个对我的情况有效。

这是我想要的布局。