如何在使用柔性包装和缩小宽度包装物品时不留空间？

Question

主要思想是将所有内容尽可能地与页面中心的彼此对齐。缩小左边的项目会向下移动到另一行，但是当发生这种情况时，我希望左边的div尽可能地围绕元素新位置。似乎在使用flex-wrap时不会发生这种情况。我已经制作了一个jsfiddle，这里有两个截图显示我的意思。

关于我提出问题的方式，我的代码或问题的任何反馈是适当的。谢谢！

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

第二张图片显示左侧有一些蓝色空间，在这种情况下，我更喜欢它包裹内容，但它没有这样做。