Column-Count Is Not Working in Chrome

Column-count is not working in Chrome

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>

column-count not splitting on short columns in Chrome

In this case, I would simply change the HTML structure to wrap label/input inside divs:

.aoi {

  column-count: 2;

  padding: 1em 1em 1em 2em;

}

<div class="aoi types-of-communication">

  <div>

    <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">

    <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>

  </div>

  <div>

    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">

    <label class="bfsubs_option_label" for="option_20000">Insights</label>

  </div>

</div>

Column-count issue in chrome

The column rule break the element to adjust the height. In your case it happened. Fortunately, you can tell the browser to keep specific elements together with break-inside: avoid;.

At the moment, the property universally accepts the values auto and avoid.
Use avoid on an element within a multi-column layout to keep the property from breaking apart.

.grid-item { 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

column-count does not work within a fieldst in chrome

For anyone who may come across this, I was able to write a div within the fieldset and column count works great. Just add this wherever you can:

$( "fieldset" ).wrapInner( "<div></div>");

Why is my column-count not working with Bootstrap in Chrome?

I was using Twitter's Bootstrap and the .col-md-6 has defined min-height as 1px, hence the thin line.

I managed to solve it by adding min-height: initial to my columnized class.

Hope this helps others that bump against this odd problem.

---

Related Topics