title: Unbalanced CSS columns in Chrome
body: <p>I want to display some Bootstrap list groups dynamically in multiple columns using <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" rel="nofollow noreferrer">CSS columns</a>, but I'm getting some weird spacing issues in Chrome. Firefox works perfectly. It looks like exactly the issue <a href="https://stackoverflow.com/questions/26017065/extra-space-beneath-css-column-layout?rq=1">this guy had</a>, but he never got an answer, possibly because he didn't provide a good example. So I will provide a good example.</p>
  
  <p>CSS (loaded after Bootstrap):</p>
  
  <pre><code>.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%;      
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="columns"&gt;
    &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;Cras justo odio&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Dapibus ac facilisis in&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Morbi leo risus&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;Porta ac consectetur ac&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Vestibulum at eros&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;Cras justo odio&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Dapibus ac facilisis in&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Morbi leo risus&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;Porta ac consectetur ac&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Vestibulum at eros&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;Cras justo odio&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Dapibus ac facilisis in&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Morbi leo risus&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;Porta ac consectetur ac&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Vestibulum at eros&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://www.bootply.com/4kvDje3M5L" rel="nofollow noreferrer">Here it is on Bootply.</a> Everything is fine in Firefox: the first 3 list groups go in the first column, the next 3 go in the second. But in Chrome, the first 4 go in the first column, leaving the second column very short with only 2. How can I get it to balance?</p>
  
  <p>(I've also observed another problem described in <a href="https://stackoverflow.com/questions/26017065/extra-space-beneath-css-column-layout?rq=1">the same question I linked to above</a> where sometimes Chrome will create a big margin under the columns, but I'll leave that for a separate question later.)</p>