The problem is simple.
I generate a bunch of inline-block DIV things with a fixed with of 345px.
They are all in another DIV that has column-width:345px; so that resizing will generate whatever number of columns fits on the screen and the elements all list down the columns nicely.
The problem is, on mouse over each of these elements expands increasing in height (new contend is added below it).
So, when you get to the bottom of the column block, you have the issue of the bottom line expanding and then jumping to the top of the next column where it can’t be seen.
All searches seem to just land me on a page about break-inside, but that just stops the element from splitting between 2 columns. The issue I have is its jumping to the next.
It’s obvious why but how can we get around this in css? Iv not found any option that lets you list content in a column format top to bottom, top to bottom, only left to right.
Example:
`
line 1
line 2
`
