在CSS中自动调整Flexbox列的大小

Question

我正在尝试在html / css中创建几列，这些列可以包含任意数量的元素。我希望每一列都随着元素数量的增加而扩大。到目前为止，我遇到了一个奇怪的错误，即列彼此重叠。

这里是jsfiddle的解释。

<style>
.outer {
  display: flex;
  flex-flow: row wrap;
  height: 120px;
}

.column {
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  border: solid 1px;
}

.row {
  width: 100px;
  height: 40px;
}

</style>

<div class=outer>

  <div class='column'>
    <div class='row'>
      row1
    </div>
    <div class='row'>
      row1
    </div>
    <div class='row'>
      row1
    </div>
    <div class='row'>
      row1
    </div>
    <div class='row'>
      row1
    </div>
    <div class='row'>
      row1
    </div>
    <div class='row'>
      row1
    </div>
  </div>
  <div class='column'>
    <div class='row'>
      row2
    </div>
  </div>
  <div class='column'>
    <div class='row'>
      row3
    </div>
    <div class='row'>
      row3
    </div>
  </div>
</div>