Unbalanced CSS columns in Chrome

Question

I want to display some Bootstrap list groups dynamically in multiple columns using CSS columns, but I'm getting some weird spacing issues in Chrome. Firefox works perfectly. It looks like exactly the issue this guy had, but he never got an answer, possibly because he didn't provide a good example. So I will provide a good example.

CSS (loaded after Bootstrap):

.columns {
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

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

HTML:

<div class="columns">
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Here it is on Bootply. Everything is fine in Firefox: the first 3 list groups go in the first column, the next 3 go in the second. But in Chrome, the first 4 go in the first column, leaving the second column very short with only 2. How can I get it to balance?

(I've also observed another problem described in the same question I linked to above where sometimes Chrome will create a big margin under the columns, but I'll leave that for a separate question later.)

Answer 1

Possibly a stupid question, but have you looked into flexbox?

.columns {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

.list-group {
  display: inline-block;
      width: 300px;
}

EDIT Going through unanswered questions and didn't realize how old this is.