title: Multicolum layout in Chrome being weird
body: <p>While building a mega menu using CSS-multicolumn to fill the flyout nicely with content boxes, I hit a snag: Chrome insists on arranging the blocks weirdly. Please open this fiddle in Chrome and in Firefox to see what I mean:</p>
  
  <p><a href="https://jsfiddle.net/061ar2x6/4/" rel="nofollow noreferrer">https://jsfiddle.net/061ar2x6/4/</a></p>
  
  <p>Firefox does it right (i.e. the way I want it):</p>
  
  <p>[ 1     ] [ 2     ] [ 3     ] [ 4     ]</p>
  
  <p>But Chrome does this for some reason:</p>
  
  <p>[ 1     ] [ 2     ]</p>
  
  <p>[ 3     ] [ 4     ]</p>
  
  <p>This is really annoying, because it often makes the flyout way longer than it needs to be while being half empty horizontally. Opera exhibits the same behavior, while IE/Edge is OK.</p>
  
  <p>Can anyone tell me why this is happening and what I can do to avoid it?</p>
  
  <p>Thanks :-)</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;1&lt;br&gt;...&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;br&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>