How to split a list into three columns without specifying a fixed height?

Question

Layout

I need to split the list into three columns and have the items in order from top to bottom instead of left to right.

You can't limit the height either. Through flex-direction: column does not exit.

I found the columns property. But it works crookedly, for the text, probably, it will work well.
Please tell me some way. Thanks for the answer.

Now in my example there are columns, but it wraps elements crookedly
(hints that pop up on hover are cut)

Answer 1

https://jsfiddle.net/9vdLa2fp/
break-inside: avoid; backface-visibility: hidden; and display: inline-block; help in the right places