CSS multiple columns layout: incorrect column splitting

Question

There seems to be a bug in calculation of multi column css property, present in all browsers I have checked in (latest Chrome, IE11 and Firefox). If you have 9 items in your list, and try to split it in 4 columns, the last column is always empty.

Are there any workarounds, something that will split it 3/2/2/2? Thanks in advance.

ul {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  background-color: gray;
}
li {
  background-color: tomato;
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Answer 1

http://caniuse.com/#feat=multicolumn

It looks like the column-* has alot of issues with different browsers. In your example if you were to add 1 more li element, then you can see it will fill itself in on the 4th column. My guess is its a divisibility issue.

Answer 2

It is working in same way that it supposed to work, there is enough space in 3 columns for 9 items that's why its not going into 4th, reduce height and it will be divide in more columns. or add more li that will go in 4th column

ul {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  background-color: gray;
  height:50px;
}
li {
  background-color: tomato;
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>