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

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%
}

A

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs



B

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


C

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs



D

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


E

fhdjsklfhs


F

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


G

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


H

fhdjsklfhs


I

fhdjsklfhs

fhdjsklfhs


J


K

fhdjsklfhs



L

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


M

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


N

fhdjsklfhs


O

fhdjsklfhs


P

fhdjsklfhs

fhdjsklfhs





Q


R

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


S

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


T

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


U


V

fhdjsklfhs

fhdjsklfhs

fhdjsklfhs


W


X


Y

fhdjsklfhs


Z

fhdjsklfhs

I hope it helps.