Unbalanced CSS columns in Chrome

Question

I want to dynamically display bootstrap list groups in multiple columns using CSS columns , but I'm having some weird spacing issues in Chrome, Firefox is working fine. This seems like this guy’s question, but he never had an answer, perhaps because he did not provide a good example. Therefore, I will give 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. In Firefox, everything is fine: the first 3 groups of the list go in the first column, and the next 3 go per second. But in Chrome, the first 4 go in the first column, leaving the second column very short with only 2. How can I balance it?

(I also noticed another problem described in the same question that I linked above , where sometimes Chrome creates a large margin under the columns, but I will leave this for a separate question later.)

Answer 1

This may be a dumb question, but have you looked at 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 Perform unanswered questions and do not understand how many years have passed.