title: Balanced column-fill on chrome
body: <p>I have a series of <code>inline-block</code> divs displayed in 2 columns using CSS columns.</p>
  
  <p>I want the columns to be balanced (5 items on each side for example).</p>
  
  <p>Without <code>inline-block</code> it works fine. However it sometimes breaks in the middle of one of my elements. Adding <code>inline-block</code> fixes this issue but the columns are no longer balanced in Chrome. In Firefox it works fine.</p>
  
  <p>According to this article (<a href="https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-9" rel="noreferrer">https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-9</a>) it's supposed to be balanced by default unless I set a height. I did not set a height, but I suspect that <code>inline-block</code> leads to the same condition.</p>
  
  <p>The <code>column-fill</code> property is supposed to fix this, but unsupported by Chrome. </p>
  
  <p>Is there a polyfill or workaround I can use?</p>