Unwanted space between flex items of different size in two column layout

Question

I'm trying to make items with different height values to nicely wrap in a flex container of fixed width.

A simplified code of the problem is as follows:

<div class="container">
  <div class="item bigger">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

And the CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.item {
  width: 100px;
  height: 100px;
  padding: 8px;
  margin: 8px;
  background-color: green;
}

.bigger {
  height: 160px;
}

JSFiddle link.

The result:

The problem is i cannot get rid of the space between divs 2 and 4.

I've tried playing with the align-items, justify-content and align-content properties on the parent container, but i cannot make it work.

This is the result i would like to achieve:

I'd really appreciate any suggestions on how to fix the layout (if possible).