Заполнение пространства вокруг большего гибкого элемента

Question

У меня проблема с flex. Я должен заполнить все вокруг большего элемента, но в зависимости от того, как вы положите свой изгиб, всегда будет свободное место.

Пример: https://codepen.io/fredy31/pen/vbBwrR

Есть ли способ заполнить все пробелы? Так у меня нет этих 2 белых квадратов слева и справа или выше и ниже?

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