Проблема с подсчетом Colomn в CSS

Question

Столбцы должны заполняться с ограничением высоты. Он отлично работает в Chrome, но не в IE и Firefox.

В IE и firefox он равномерно распределяется вместо высоты колонны. У меня есть всего 16 суб divs, я хочу, чтобы они пришли в 5 5 5 1. Он работает отлично в chrome (5 5 5 1) не в firefox и IE (4 4 4 4)

Вот мой код -

<div class="example"> 
    <div class="example-auto">1A</div> 
    <div class="example-auto">1B</div> 
    <div class="example-auto">1C</div> 
    <div class="example-auto">1D</div> 
    <div class="example-auto">2A</div> 
    <div class="example-auto">2B</div> 
    <div class="example-auto">2C</div> 
    <div class="example-auto">2D</div> 
    <div class="example-auto">3A</div> 
    <div class="example-auto">3B</div> 
    <div class="example-auto">3C</div> 
    <div class="example-auto">3D</div> 
    <div class="example-auto">4A</div> 
    <div class="example-auto">4A</div> 
    <div class="example-auto">4A</div> 
    <div class="example-auto">4A</div> 
</div> 

CSS

.example { 
    -webkit-columns: 4; 
    -moz-columns: 4; 
    columns: 4; 
    height:100px; 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    padding: 0 0.5em; 
} 

.example-auto { 
    -webkit-column-fill: auto; 
    -moz-column-fill: auto; 
    column-fill: auto; 
} 

Answer 1

Вы должны дать колонки заполнения: авто; в том же классе, где вы указываете columns: 4; Не нужно указывать его в классе детей.

.example { 
    -webkit-columns: 4; 
    -moz-columns: 4; 
    columns: 4; 
    height:100px; 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    padding: 0 0.5em; 
    -webkit-column-fill: auto; 
    -moz-column-fill: auto; 
    column-fill: auto; 
} 

Здесь вы можете проверить пример. http://jsfiddle.net/VijayDhanvai/0r600sg2/