column-count not splitting on short columns in Chrome

Question

EDIT: I've removed the <br> tags that several people pointed out may be causing the issue and recreated the same layout with more correct CSS, which I've included below (using width:100% on the labels instead of a break), but am still getting the same bug.

I'm using column-count:2 to put some grouped lists into columns.

It's not very often I get to write this, but on IE it works as expected, all the grouped lists split into 2 columns.

On Chrome, however, it's not splitting on a very short group of just two options. Why is this?

IE version, working as expected

Chrome not splitting the first, short group into 2 columns

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
}

.bfsubs_option_label {
background: url(checkbox_bg.png);
background-repeat: no-repeat;
padding: 0 0 0 1.75em;
height: 18px;
cursor: pointer;
display: inline-block;
margin-bottom: .5em;
background-position: 0 2px;
width: 100%;}

<div class="aoi types-of-communication" style="">
  <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>
  <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><br>
</div>

@caramba So that I could include a right aligned background image after the label text, and still have a gap underneath. If I set it to `display:inline-block` without the break, the label merges with the next line, and if I used `display:block`, the background image is all the way to the right hand side of the screen. — Sinister Beard, Mar 19 '18 at 14:49

score 2 · Accepted Answer · answered Mar 19 '18 at 14:58

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>

With more inputs:

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

This worked, thanks! Will award the bounty when I can in 23 hours. — Sinister Beard, Mar 19 '18 at 15:06

score 0 · Answer 2 · answered Mar 19 '18 at 14:43

A few thoughs on that:

I've been reading in another thread that on Chrome there's some weird behaviour with two columns and column-count. To fix that, add break-inside: avoid-column;

Reference: Chrome columns bug when number of columns is less then column-count

Another thread suggests to additionally add -webkit-backface-visibility: hidden;

Try adding -webkit-column-count property for Chrome. (However, I would've thought it works without):

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Let me know if that worked :)

score 0 · Answer 3 · answered Mar 19 '18 at 14:49

a workaround, you can add display: flex; in .aoi and it'll work.

.aoi {
  column-count: 2;
  padding: 1em 1em 1em 2em;
  display: flex;
}

<div class="aoi types-of-communication" style="">
  <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><br>
  <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><br>
</div>

That doesn't work - all the other elements from longer lists then are laid out as if they're `float:left`. — Sinister Beard, Mar 19 '18 at 14:52

column-count not splitting on short columns in Chrome

3 Answers3