调整容器大小后，以过渡方式排列元素

Question

我有一个可调整大小的容器，里面有一些box divs。

我希望每次调整div的大小时，如果创建足够的空间，则其内部的框将通过动画调整其位置，而不是突然出现在第一行中。

<div class="resize">
    <div class="box">
       box
    </div>
    <div class="box">
       box
    </div>
    <div class="box">
       box
    </div>
    <div class="box">
       box
    </div>
    <div class="box">
       box
    </div>
    <div class="box">
      box
    </div>
    <div class="box">
      box
    </div>
    <div class="box">
      box
    </div>
    <div class="box">
     box
    </div>
 </div>

div.resize { 
    width: 400px; 
    height: 200px; 
    border: 1px solid; 
    resize: both; 
    overflow: auto; 
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
 }

 div.box {
    width: 40px;
    height:40px;
    background-color: blue;
    margin: 4px;
 }

这里是fiddle

任何建议将不胜感激

编辑：我不能使用任何库，因此同位素或石工之类的游戏就不可用了。