How to fix this column filling behavior on Chrome?


On Firefox the rows get filled first, which is what I’m expecting.

However, on Chrome the columns are filled and then I get a half empty page when there isn’t enough content to fill.

How can I change this behavior on Chrome while still using flex ?

Try setting the .item elements be display: block instead of inline-block and add -webkit-column-break-inside: avoid; to the .items. as well.

1 Like