Chrome中的Multicolum布局很奇怪

Question

在使用CSS-multicolumn构建一个大型菜单以便用内容框很好地填充弹出窗口时，我遇到了一个障碍：Chrome坚持要奇怪地安排这些块。请在Chrome和Firefox中打开这个小提琴，看看我的意思：

https://jsfiddle.net/061ar2x6/4/

Firefox做得对（即我想要的方式）：

[1] [2] [3] [4]

但Chrome出于某种原因这样做：

[1] [2]

[3] [4]

这真的很烦人，因为它往往使弹出方式比水平半空时更长。 Opera表现出相同的行为，而IE / Edge则可以。

任何人都可以告诉我为什么会这样，我可以做些什么来避免它？

谢谢： - ）

<ul>
  <li>1<br>...</li>
  <li>2</li>
  <li>3</li>
  <li>4<br>...</li>
</ul>