Неуравновешенные столбцы CSS в Chrome

Question

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

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> 

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

(я также наблюдал еще одну проблему, описанную в the same question I linked to above где иногда Chrome будет создавать большой запас под колоннами, но я оставлю это для отдельного вопроса позже.)

Answer 1

Возможно, глупый вопрос, но вы заглянули в 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 Проходя вопросов без ответа и не понял, сколько лет это.