Многоцветная раскладка в Chrome странная
При создании мегаменю с использованием CSS-мультиколонки, чтобы красиво заполнить всплывающее окно с полями контента, я наткнулся на загадку: 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>