Chrome中的不平衡CSS列

我想使用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:

  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Morbi leo risus
  
  

    
Porta ac consectetur ac
    
Vestibulum at eros
  
  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Morbi leo risus
  
  

    
Porta ac consectetur ac
    
Vestibulum at eros
  
  

    
Cras justo odio
    
Dapibus ac facilisis in
    
Morbi leo risus
  
  

    
Porta ac consectetur ac
    
Vestibulum at eros
  

这是在Bootply上.Firefox中的一切都很好:前3个列表组位于第一列,后3个列表位于第二列.但是在Chrome中,前4列进入第一列,第二列非常短,只有2.我怎样才能达到平衡？

(我还观察到我在上面链接的同一个问题中描述的另一个问题,有时Chrome会在列下创建一个很大的余量,但我会在以后单独提出这个问题.)