title: Div containing columns is too tall
body: <p>(I've looked at some other questions like this on stack, particularly <a href="https://stackoverflow.com/questions/13851773/extra-space-at-the-bottom-of-css-columns">Extra space at the bottom of CSS columns</a>, but I couldn't see the issue the asker was having in the fiddle he presented, and trying that solution didn't work anyways.)</p>
  
  <p>Anyways, I have extra space added below my columns in a div with column-width applied. <a href="http://jsfiddle.net/EAqE9/" rel="nofollow noreferrer" title="JS Fiddle">Here's a link</a> to the an example. My issue is the extra blue space below any columns. When I remove one or another, it seems to settle. Can I have the container div shrink to only use as much space as is needed?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="columns"&gt;
      &lt;div class="font-console column_div"&gt;
          &lt;b&gt;authors:&lt;/b&gt;
          &lt;ul&gt;
              &lt;li&gt;author_name&lt;/li&gt;
              &lt;li&gt;author_id&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="font-console column_div"&gt;
          &lt;b&gt;authors:&lt;/b&gt;
          &lt;ul&gt;
              &lt;li&gt;author_name&lt;/li&gt;
              &lt;li&gt;author_id&lt;/li&gt;
              &lt;li&gt;checked_out&lt;/li&gt;
              &lt;li&gt;checked_out&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="font-console column_div"&gt;
          &lt;b&gt;checkouts:&lt;/b&gt;
          &lt;ul&gt;
              &lt;li&gt;checked_out&lt;/li&gt;
              &lt;li&gt;checked_in&lt;/li&gt;
              &lt;li&gt;checked_out&lt;/li&gt;
              &lt;li&gt;checked_in&lt;/li&gt;
              &lt;li&gt;checked_out&lt;/li&gt;
              &lt;li&gt;checked_in&lt;/li&gt;
              &lt;li&gt;checked_out&lt;/li&gt;
              &lt;li&gt;checked_in&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="font-console column_div"&gt;
          &lt;b&gt;authors:&lt;/b&gt;
          &lt;ul&gt;
              &lt;li&gt;author_name&lt;/li&gt;
              &lt;li&gt;author_id&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="font-console column_div"&gt;
          &lt;b&gt;books:&lt;/b&gt;
          &lt;ul&gt;
              &lt;li&gt;ttttttytytytytytytytytytytytytytytytytytytytytytytytytyty&lt;/li&gt;
              &lt;li&gt;author_id&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.columns {
      -webkit-column-count: 3;
      margin: 10px;
      background-color: #0099ff;
  }    
  
  .column_div {
      -webkit-column-break-inside: avoid;
      background-color: #ff9900;
      display: block;
  }
  </code></pre>