css - CSS 列の高さが column-break-inside と等しくない: 避ける

Question

さまざまな高さのブロックのリストがあります。

<div class="container">
  <div class="block">
    <div class="item">abcxyz</div>
    <div class="item">abcxyz</div>
    <div class="item">abcxyz</div>
  </div>
  <div class="block">
    <div class="item">abcxyz</div>
  </div>
...
</div>

css column-count プロパティを使用して、それらを 3 列に流したい。ブロックを壊したくないので、column-break-inside: avoid を適用します。問題は、それが適用されると、列の高さの分割が非常に不均等になることです。

.container {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  height: 180px;
}
.block {
  padding: 10px;
  border-bottom: 2px solid #97979b;
  -webkit-column-break-inside:avoid;
  -moz-column-break-inside:avoid;
  -o-column-break-inside:avoid;
  -ms-column-break-inside:avoid;
  column-break-inside:avoid;
}

このコードペンhttp://codepen.io/KwiZ/pen/PwmXPBを参照してください。コンテナの固定高さを設定したときのように、高さ分割はより良いかもしれません: http://codepen.io/anon/pen/emWbmm、しかしもちろん固定高さは悪いので避けるべきです。なぜこれが起こるのか、列の高さを自然に等しくする方法は?