Flex包装动态高度的物品

Question

flex-item--third按预期包装，但我想将其正好放在flex-item--first下方，而不是由flex-item--second元素的高度引起的大余量。

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  width: 50%;
}

.flex-item--first {
  background-color: red;
  height: 100px;
}

.flex-item--second {
  background-color: pink;
  height: 250px;
}

.flex-item--third {
  background-color: blue;
  height: 150px;
}

<div class="flex-container">
  <div class="flex-item flex-item--first"></div>
  <div class="flex-item flex-item--second"></div>
  <div class="flex-item flex-item--third"></div> 
</div>