Problem with counting Colomn in CSS

Question

Columns must fill in the height limit. It works fine in Chrome, but not in IE and Firefox.

In IEand firefoxit is distributed evenly, and does not occupy the height of the column. I have a total of 16 sub divs, I want them to go into 5 5 5 1. It works fine in chrome(5 5 5 1) not in firefoxand IE(4 4 4 4)

Here is my code -

<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

You need to specify column-fill: auto; in the same class where you specify the columns : 4; No need to indicate it in the child's class.

.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/