How to align flex elements to the left when there's not enough of them to fill the row?

Question

I have 3 columns laid out with flex. Occasionally the last row has only 2 elements instead of 3, in which case the first element of the row is aligned to the left whereas the second one is aligned to the right (creating a huge gap in the middle): instead I want the second one to be aligned to the left.

Is there a way to achieve that easily?

JSFiddle

<div class="container">
  <post>content</post>
  <post>content</post>
  <post>content</post>
  <post>content</post>
  <post>content</post>
</div>

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

post {
  flex: 0 0 30%;
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 20px;
  background: #eee;
}