Как разбить на равные по высоте столбики columns?

Question

[HelpSophie]

код: https://jsfiddle.net/tbu3z8rr/

Почему разбивается на 5 и 3, а не на 4 и 4?
Я даже уже высоту специально равную указала для li. (Вообще она произвольная)

Высота пунктов произвольная.
Количество пунктов тоже произвольное. Т.е. общая высота блока неизвестна.

Как сделать так, чтобы разбивалось пополам?

С флексом тоже не выходит без указания высоты.

UPD: webkit

Answer 1

[Максим Тимофеев]

columns предназначен для вывода текста в несколько колонок, то что Вы делаете должно быть реализовано другим способом.
Как минимум li не должен быть display: inline-block;

Comments

[HelpSophie]

Если li не будет inline-block, то будут переносы посередине li.
(masonry на CSS)

[HelpSophie]

Хотя, можно попробовать пойти путем column-span: none;

[HelpSophie]

Максим Тимофеев

должно быть реализовано другим способом.

Каким?
(Ну кроме идеи считать высоту всех li на js)

[Максим Тимофеев]

если делать на masonry, то зачем вообще разбивать на колонки, этим masonry должен заниматься

[HelpSophie]

Максим Тимофеев: я не делаю c masonry, я сказала, что для аналога построения как у masonry, но на чистом CSS для li указывают inline-block, чтобы этот самый li не оказался в разных столбцах.

[HelpSophie]

Максим Тимофеев: Вы бы как стали это делать?

Answer 2

[sergski]

Баг из-за свойства content у псевдо-элемента, как-то так

Comments

[HelpSophie]

Если убрать высоту у li, то все уедет (webkit)

[sergski]

HelpSophie: Тут дело в механизме работы свойства columns -- расчете высот на равные части. Если тексты сделать короче, до работает выравнивается поровну https://jsfiddle.net/tbu3z8rr/7/
Сверстаете без columns.