Column-count is not working in Chrome

Question

I have a text splitted in 4 columns and it works perfectly in Safari I don\'t know why I can see just 2 columns in Google Chrome.

Tested with Chrome 55.0.2883.95 (64

Answer 1

Replace display:inline-block by display:block.

According to caniuse, for Chrome issue, you should add -webkit-perspective:1; on the container.

#people{
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
 -webkit-perspective:1;
}

.keeptogether{
  display:block;
  width:100%
}

<div id=people>
<div class=keeptogether>
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>

<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
L<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>M<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>N<br>
fhdjsklfhs<br>
<br>O<br>
fhdjsklfhs<br>
<br>P<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<span class=yes><br></span>
</div>
<div class=keeptogether>
Q<br>
<br>R<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>S<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>T<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>U<br>
<br>V<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>W<br>
<br>X<br>
<br>Y<br>
fhdjsklfhs<br>
<br>Z<br>
fhdjsklfhs<br>
</div>
</div>

Answer 2

From my experience with this issue i found out -webkit needs to come last (Otherwise I guess it tries to use the non webkit and fails)

        column-count: 2; 
        -moz-column-count: 2; 
        -webkit-column-count: 2; 

Answer 3

If you add display: flex; to #people ID, then it works fine in all the browsers and you don't need display:inline-block; for .keeptogether class.

You can check the code snippet:

#people {
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 display: flex;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
}

.keeptogether {
  width:100%
}

<div id=people>
<div class=keeptogether>
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>

<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
L<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>M<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>N<br>
fhdjsklfhs<br>
<br>O<br>
fhdjsklfhs<br>
<br>P<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<span class=yes><br></span>
</div>
<div class=keeptogether>
Q<br>
<br>R<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>S<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>T<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>U<br>
<br>V<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>W<br>
<br>X<br>
<br>Y<br>
fhdjsklfhs<br>
<br>Z<br>
fhdjsklfhs<br>
</div>
</div>

I hope it helps.

Answer 4

Why do you need to give display: inline-block ? the concept of using column property is to divide your whole given content into equal width columns. So if you remove your inner-div, the all content gets properly aligned into given number of columns.

This also works, if you remove inline-block from your current code.

#people {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: .5em;
  -moz-column-gap: .5em;
  column-gap: .5em;
  padding-bottom: 2px;
  font-size: 18px;
  line-height: 21px;
}


/* you don't need this property
.keeptogether {
  display: inline-block;
  width: 100%;
}
*/

<div id="people">
  A<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>

  <br>B<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>C<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> D
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>E<br> fhdjsklfhs
  <br>
  <br>F<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>G<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>H<br> fhdjsklfhs
  <br>
  <br>I<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>J<br>
  <br>K<br> fhdjsklfhs
  <br> L
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>M<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>N<br> fhdjsklfhs
  <br>
  <br>O<br> fhdjsklfhs
  <br>
  <br>P<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <span class="yes"><br></span> Q
  <br>
  <br>R<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>S<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>T<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>U<br>
  <br>V<br> fhdjsklfhs
  <br> fhdjsklfhs
  <br> fhdjsklfhs
  <br>
  <br>W<br>
  <br>X<br>
  <br>Y<br> fhdjsklfhs
  <br>
  <br>Z<br> fhdjsklfhs
  <br>
</div>

Answer 5

After suffering this issue with Chrome 80.0 the solution was from a comment on the question:

.childbrick {
    break-inside: avoid-column;
}

This fixed both the odd lack of columns in Chrome as well as the column splitting which occurred if not using display:inline-block; .

The comment references a Firefox issue with this workaround but I have found no such issues with Firefox version 73.

Answer 6

Add display: flex; to your #people id in your css:

#people{
  display: flex;
 -webkit-column-count: 4; /* Chrome, Safari, Opera */
 -moz-column-count: 4; /* Firefox */
 column-count: 4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
}

.keeptogether{
  display:inline-block;
  width:100%;
}

<div id=people>
  <div class="keeptogether">
  A<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>

  <br>B<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>C<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  </div>
  <div class="keeptogether">
  D<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>E<br>
  fhdjsklfhs<br>
  <br>F<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>G<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>H<br>
  fhdjsklfhs<br>
  <br>I<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>J<br>
  <br>K<br>
  fhdjsklfhs<br>
  </div>
  <div class="keeptogether">
  L<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>M<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>N<br>
  fhdjsklfhs<br>
  <br>O<br>
  fhdjsklfhs<br>
  <br>P<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <span class="yes"><br></span>
  </div>
  <div class="keeptogether">
  Q<br>
  <br>R<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>S<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>T<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>U<br>
  <br>V<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  fhdjsklfhs<br>
  <br>W<br>
  <br>X<br>
  <br>Y<br>
  fhdjsklfhs<br>
  <br>Z<br>
  fhdjsklfhs<br>
  </div>
</div>

Hope it helped