Как перенести по оканчанию div?

Question

[Alexyz Canson]

<div id="lst">
    <div><span>Один</span><span>345</span><span>1</span></div>
    <div><span>Два</span><span>98</span><span>2</span></div>
    <div><span>Три </span><span>548</span><span>3</span></div>
    <div><span>Четыре</span><span>234</span><span>4</span></div>
    <div><span>Пять</span><span>38</span><span>5</span></div>
...
порядка 150 штук
</div>

Нужно чтобы по оканчанию высоты основного див переносилось на новый столбец

с display: inline-block; и с float он делает не так
123
456
789

нужно
1 4 7
2 5 8
3 6 9

спасибо

Answer 1

[Rustam Bainazarov]

#lst {
   display: flex;
   flex-flow: column wrap;
   max-height: высота нужная;
}

Или

#lst {
   column-count: 3;
}

Comments

[Alexyz Canson]

Большое спасибо!

[Rustam Bainazarov]

Alexyz Canson, не за что!