Спецификация CSS столбца в браузерах на основе Webkit

Question

Я использовал this tutorial для реализации макета в моем текущем проекте.

При тестировании на некоторых браузерах на основе Webkit (современный Google Chrome и Vivaldi) существует проблема, заключающаяся в том, что браузер не соблюдает спецификацию column-count.

Plunk here

В конкретном случае настольных устройств (MD или LG), когда контейнер содержит два элемента, эти дети уложены вертикально, а не занимая две колонки. В Firefox содержание использует два столбца, а самый правый столбец пуст.

Когда в контейнере есть три элемента, Firefox использует три столбца, тогда как Webkit использует только два столбца. Для того, чтобы Webkit фактически использовал три столбца, требуется не менее 4 или 5 элементов, а это означает, что имеется достаточно места. Чтобы проверить точку разреза, переместите открытую строку комментария <!-- вверх и вниз по исходному коду HTML.

Есть ли что-нибудь, что я могу сделать, чтобы иметь «правильное» поведение, например, в Firefox и IE? То, как я понимаю столбцы, заключается в том, что контент распределяется по указанному числу столбцов, когда есть достаточно места, в которое может входить содержимое. Я ошибаюсь? Или это просто Webkit бросает мне прихоть?

Answer 1

.example { 
    -webkit-column-count: value; 
    -moz-column-count: value; 
      column-count: value; 
} 

Попробуйте использовать Autoprefixer и Caniuse.