Высота CSS-столбцов не равна столбцу-break-inside: избегать
У меня есть список блоков разной высоты.
<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>
Я хочу, чтобы они текли в 3 столбца, используя свойство css column-count. Я не хочу, чтобы блоки были разбиты, поэтому я применяю разбиение на столбцы: избегайте. Проблема в том, что когда он применяется, то деление высоты столбцов очень неравномерно.
.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, но, конечно, фиксированная высота плохая и ее следует избегать. Почему это происходит и как сделать высоту столбцов естественно равной?