Несбалансированные CSS-столбцы в Chrome

Я хочу, чтобы динамически отображать некоторые группы списка Bootstrap в нескольких столбцах, используяСтолбцы CSS, но у меня возникают странные проблемы с пробелами в Chrome. Firefox работает отлично. Похоже именно проблемаэтот парень имелНо он так и не получил ответа, возможно, потому что он не привел хороший пример. Поэтому я приведу хороший пример.

CSS (загружается после 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>

Вот это на Bootply. В Firefox все нормально: первые 3 группы списков идут в первом столбце, следующие 3 - во втором. Но в Chrome первые 4 идут в первом столбце, оставляя второй столбец очень коротким, имея только 2. Как мне его сбалансировать?

(Я также заметил другую проблему, описанную втот же вопрос, на который я ссылался выше где иногда Chrome создает большую границу под колонками, но я оставлю это для отдельного вопроса позже.)

Ответы на вопрос(1)

Ваш ответ на вопрос