Flex wrap items with dynamic height

Question

The flex-item--third is wrapped as expected, but I'd like to place it exactly beneath the flex-item--first and not to have that big margin caused by the height of the flex-item--second element.

.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>