Balanced column-fill on chrome

Question

I have a series of inline-block divs displayed in 2 columns using CSS columns.

I want the columns to be balanced (5 items on each side for example).

Without inline-block it works fine. However it sometimes breaks in the middle of one of my elements. Adding inline-block fixes this issue but the columns are no longer balanced in Chrome. In Firefox it works fine.

According to this article (https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-9) it's supposed to be balanced by default unless I set a height. I did not set a height, but I suspect that inline-block leads to the same condition.

The column-fill property is supposed to fix this, but unsupported by Chrome.

Is there a polyfill or workaround I can use?

Answer 1

Try using display: flex instead of display: inline-block. You don't need to use anything else from Flex, but somehow it behaves similarly to inline-block and it works with column-fill: balance in both Chrome and Firefox (in Chrome you may need to use also break-inside: avoid). It may not work for all cases, but I had a similar issue and it worked for me