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

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

  

  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

  

Hope it helped