Flexbox row, wrap items and take up vertical space

Question

I'm having a flexbox layout like this:

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

Now, when the items get wrapped, the blue item will shift onto a new row:

As you can see there is some unwanted whitespace. Now what I want, but can't seem to achieve, is that the blue column takes up all available space: