How to leave no space when wrapping items with flex-wrap and scaling down width?

Question

Main idea is to align all content as close as possible to eachother in the center of the page. When scaling down items in the left will move down to another row, but when this happens I want the left div to wrap around the elements new position as close as possible. It seems that when using flex-wrap this does not happen. I've made a jsfiddle and here are two screenshots showing what I mean.

Any feedback on the way I present the problem, my code or the problem is appriciated. Thanks!

<div class='container'>
  <div class='wrapper'>
    <div class='left'>
    <div class='item'>
    item 1
    </div>
        <div class='item'>
    item 2
    </div>
        <div class='item'>
    item 3
    </div>
    </div>
    <div class='right'>
    hello right
    </div>
  </div>
</div>

.container {
  width:auto;
  display: flex;
  justify-content: center;
  background-color: lightblue;
  }
.wrapper {
  display: flex;
  justify-content: center;
}
.left {
  width: auto; 
  background-color:blue;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  }
.right {width: 100px; background-color: yellow;}

.right,.left {height: auto;}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
}

https://jsfiddle.net/f1egs7hr/

Second picture is showing some space on the left in the blue, in this situation i would prefer it that it wraps around the content but it doesnt do so.