Элементы Multicol ведут себя по-разному между Chrome и Firefox

Question

Странная многоколоночная проблема мешает мне получить макет, чтобы посмотреть, как я его хочу. Я пытаюсь получить элементы в контейнере для выравнивания в столбцах.

<div class="container"> 
    <div class="element">lorem</div> 
    <div class="element">ipsum</div> 
</div> 

Вот JSfiddle, который показывает, что я имею в виду: https://jsfiddle.net/2sobjo12/3/

Если открыть эту скрипку в Chrome или Opera, вы увидите два элемента, сложенных друг на друга. Однако в Firefox или IE/Edge они выравниваются по горизонтали (как я и предполагал).

Кто-нибудь знает, что вызывает подобное поведение? И что еще более важно, что я могу сделать, чтобы исправить это?

--- EDIT ---

Чтобы уточнить, позвольте мне объяснить, что я пытаюсь сделать. Контейнер, о котором идет речь, является мега-меню, элементы являются подменю в указанном контейнере. Таким образом, я хочу, чтобы браузер распределял подменю равномерно в контейнере, хотя они могут значительно различаться по высоте. Сравните эту скрипку в Chrome и Firefox, чтобы увидеть, что я имею в виду:

https://jsfiddle.net/2sobjo12/15/

Firefox делает хорошую работу, в то время как Chrome настаивает на размещение второго элемента под первым по какой-то причине, и полностью выходит четвертый столбец пустой.

Answer 1

В вашем css добавить float: left. Свойство float указывает, должен ли элемент float.It может использоваться для обертывания текста вокруг изображений.

li { 
    background: white; 
    display: inline-block; 
    width: 100%; 
    margin: 0 0 5px 0; 
    float:left; 
} 

Полный CSS в соответствии с просьбой

.container { 
background: green; 
width:100%; 
float:left; 
padding: 15px 15px 10px; 
} 

.container .element { 
    background: white; 
    display: inline-block; 
    margin: 0 10px 5px 0; 
    float: left; 
    width:25% 

}