title: CSS auto column-count when max-height is fixed
body: <p>I wish to achieve a layout where an element (in my case a <code>&lt;ul&gt;</code>) expands to 2 (or more) columns when the height reaches a certain limit. </p>
  
  <p>So for example, if the height is only enough for 3 items, and I have 5, the 4th and 5th item go to the second column, which is only created if needed. </p>
  
  <p>I tried to do this by setting the <code>max-height</code> as suggested <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts#Height_Balancing" rel="noreferrer">here</a> with <code>column-count</code> and <code>column-width</code> set to <code>auto</code> via the <code>columns</code> (I tried setting them separately too, same behaviour). </p>
  
  <p>If on the other hand I change the <code>column-count</code> to a fixed integer, it works and balances the items, but this is not dynamic as I need it. (If I have only 2 elements I don't want to create 2 columns for them).</p>
  
  <p>Is there a way to have the height fixed, and the columns automatically added when the height is not enough to fit all the items?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul#list {
    font-family: sans-serif;
    list-style: none;
    background: #dddddd;
    max-height: 200px;
    
    columns: auto auto;
    -webkit-columns: auto auto;
    -moz-columns: auto auto;
    
    /** This works, but fixes the columns to 2, which is not what I want.
       columns: 2 auto; 
     -webkit-columns: 2 auto;
     -moz-columns: 2 auto;
    */
    
    column-gap: 10px;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    
    column-rule: 1px solid black;
    -webkit-column-rule: 1px solid rgba(100, 30, 30, 0.4);
    -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4);
  }
  
  li {
    height: 20px;
    padding: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;
    &lt;ul id="list"&gt;
      &lt;li&gt;Item #1&lt;/li&gt;
      &lt;li&gt;Item #2&lt;/li&gt;
      &lt;li&gt;Item #3&lt;/li&gt;
      &lt;li&gt;Item #4&lt;/li&gt;
      &lt;li&gt;Item #5&lt;/li&gt;
      &lt;li&gt;Item #6&lt;/li&gt;
      &lt;li&gt;Item #7&lt;/li&gt;
      &lt;li&gt;Item #8&lt;/li&gt;
      &lt;li&gt;Item #9&lt;/li&gt;
      &lt;li&gt;Item #10&lt;/li&gt;
      &lt;li&gt;Item #11&lt;/li&gt;
      &lt;li&gt;Item #12&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>