CSS专栏＆＃39;高度不等于列-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。问题是，当它被应用然后列'＆＃39;高度划分非常不平等。

.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;
}

请参阅此codepen http://codepen.io/KwiZ/pen/PwmXPB。高度划分本来可以更好，就像我为容器设置一个固定高度：http://codepen.io/anon/pen/emWbmm，但当然固定高度很差，应该避免。 为什么会发生这种情况以及如何制作列？身高自然相等？