Как разбить список на три колонки без указания фиксированной высоты?

Question

[Иван Гришов]

Мне необходимо разбить список на три колонки и чтобы элементы шли по-порядку сверху вниз, а не слева направо.

Ограничивать высоту тоже нельзя. Через flex-direction: column не выходит.

Я нашел свойство columns. Но оно криво работает, для текста, наверное, хорошо подойдет.
Подскажите какой-нибудь способ. Спасибо за ответ.

Сейчас в моем пример стоит columns, но он криво переносит элементы
(подсказки, которые всплывают при наведение - разрезаются)

Comments

[Иван Гришов]

число элементов может будет любое, будут выводиться циклом.

[Dimka59]

падинг добавить?

Answer 1

[andand44]

https://jsfiddle.net/9vdLa2fp/
break-inside: avoid; backface-visibility: hidden; и display: inline-block; в нужных местах могут помочь

Comments

[Иван Гришов]

Спасибо. Только не понятно зачем свойство backface-visibility: hidden. Оно, как я понимаю, скрывает обратную сторону блока, при анимации, когда мы переворачиваем блок.

[andand44]

Можно попробовать убрать. Не помню, для чего оно в подобном случае, но в похожих вопросах его часто упоминали.