填充较大的flex元素周围的空间

Question

我在flex上有问题。我必须围绕一个较大的元素填充所有内容，但是根据您放置flex的方式，总会有一个空白。

示例：https://codepen.io/fredy31/pen/vbBwrR

有没有办法填补所有空白？所以我没有在左右，上下两个空格？

<style>
.container{
    display:flex;
}
.flex{
  display:flex;
  flex-wrap:wrap;
  max-width:200px;
  margin-right:50px
}

.flex-column{
  display:flex;
  flex-wrap:wrap;
  max-width:200px;
  max-height:200px;
  margin-right:50px;
  flex-direction:column;
}
.el{
  width:50px;
  height:50px;
}

.el.elbig{
  width:100px;
  height:100px
}

.el1{background:red;}
.el2{background:blue;}
.el3{background:yellow;}
.el4{background:purple;}
.el5{background:pink;}
.el6{background:black;}
.el7{background:orange;}
.el8{background:red;}
.el9{background:blue;}
.el10{background:yellow;}
.el11{background:purple;}
.el12{background:pink;}
</style>
<div class="container">
  <div class="flex">
    <div class="el el1"></div>
    <div class="el el2"></div>
    <div class="el el3"></div>
    <div class="el el4"></div>
    <div class="el el5"></div>
    <div class="el elbig el6"></div>
    <div class="el el7"></div>
    <div class="el el8"></div>
    <div class="el el9"></div>
    <div class="el el10"></div>
    <div class="el el11"></div>
    <div class="el el12"></div>
  </div>

  <div class="flex-column">
    <div class="el el1"></div>
    <div class="el el2"></div>
    <div class="el el3"></div>
    <div class="el el4"></div>
    <div class="el el5"></div>
    <div class="el elbig el6"></div>
    <div class="el el7"></div>
    <div class="el el8"></div>
    <div class="el el9"></div>
    <div class="el el10"></div>
    <div class="el el11"></div>
    <div class="el el12"></div>
  </div>