使用Flexbox网格，消除列之间的间隙

Question

我有这个HTML＆CSS。

HTML：

 <div class="cont">
  <div class="first">
    <div class="children">First First</div>
    <div class="children">First Second</div>
  </div>
  <div class="second">
    <div class="children">Second First</div>
    <div class="children">Second second</div>
    <div class="children">Second third</div>
  </div>
  <div class="third">
    <div class="children">Third First</div>
  </div>
  <div class="fourth">
    <div class="children"></div>
  </div>
</div>

和CSS：

.cont{
    display: flex;
    flex-wrap: wrap;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}
.children{
    height: 200px;
    margin: 10px 0;
    display: block;
    background: red;
}
.cont > div{
    padding: 0 10px;
    width: 40%;
}
.first {
    background: green;
}
.second{
    background: brown;
}
.third{
    background: blue;
}

您可以在这里看到它：CODEPEN。

它是具有display:flex和列.first, .second, .third, etc的父容器。仅以示例为例，每列都有不同的背景，并且元素具有固定的height。

问题在于，不同的列之间存在间隙。例如，在first和third列之间。我看到，第一列和第二列的高度是一样的（第一列是background:green）。

我怎样才能消除这个空白，只有CSS才可能吗？

我用align-items, align-content，这些列的'display：flex'等方法做了很多尝试。