Chrome中的不平衡CSS列

Question

我想使用CSS列在多列中动态显示一些Bootstrap列表组,但我在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会在列下创建一个很大的余量,但我会在以后单独提出这个问题.)

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;
}

编辑浏览未回答的问题，但没有意识到这有多老了。