title: Why doesn't my <ul> expand width to cover all the <li>?
body: <p>I have a nav that I'm trying to create with flexbox. I want the  to have a max height, and have the <code>&lt;li&gt;</code> push to a new column when there isn't enough space for it.</p>
  
  <p>I have displayed the <code>&lt;ul&gt;</code> inline-flex. The <code>&lt;li&gt;</code> are jumping on to a new column, but the <code>&lt;ul&gt;</code> doesn't expand with the <code>&lt;li&gt;</code> - causing an overflowing effect</p>
  
  <p><a href="https://codepen.io/Woodenchops/pen/KGOYRK" rel="nofollow noreferrer">https://codepen.io/Woodenchops/pen/KGOYRK</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
        background: red;
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-height: 350px;
        padding: 1rem;
      }
      
      .sub-ul {
        background: none;
      }
      
      li {
        list-style: none;
        font-size: 46px;
      }
      
      .sub-li {
        font-size: 16px;
      }
      
      
      .oneColumn {
        width: auto;
      }
      
      .twoColumn {
        width: 490px;
      }
      
      .threeColumn {
        width: 980px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="sub-menu topul"&gt;
        &lt;li class="menu-item"&gt;&lt;a href=""&gt;item1&lt;/a&gt;&lt;/li&gt;
        &lt;li class="menu-item"&gt;&lt;a href=""&gt;item2&lt;/a&gt;&lt;/li&gt;
        &lt;li class="menu-item"&gt;&lt;a href=""&gt;item3&lt;/a&gt;&lt;/li&gt;
        &lt;li class="menu-item"&gt;&lt;a href=""&gt;item4&lt;/a&gt;&lt;/li&gt;
        &lt;li class="menu-item"&gt;&lt;a href=""&gt;item5&lt;/a&gt;&lt;/li&gt;
        &lt;li class="menu-item"&gt;
         
          &lt;ul class="sub-menu sub-ul"&gt;
            &lt;li class="menu-item sub-li"&gt;
              
              &lt;a href=""&gt;sub menu item&lt;/a&gt;
              
            &lt;/li&gt;
            &lt;li class="menu-item sub-li"&gt;
              
              &lt;a href=""&gt;sub menu item&lt;/a&gt;
              
            &lt;/li&gt;
            &lt;li class="menu-item sub-li"&gt;
              
              &lt;a href=""&gt;sub menu item&lt;/a&gt;
              
            &lt;/li&gt;
          &lt;/ul&gt;
          
        &lt;/li&gt;
        
         &lt;li class="menu-item"&gt;&lt;a href=""&gt;item4&lt;/a&gt;&lt;/li&gt;
        &lt;li class="menu-item"&gt;
          
          &lt;ul class="sub-menu sub-ul"&gt;
            &lt;li class="menu-item sub-li"&gt;
              
              &lt;a href=""&gt;sub menu item&lt;/a&gt;
              
            &lt;/li&gt;
            &lt;li class="menu-item sub-li"&gt;
              
              &lt;a href=""&gt;sub menu item&lt;/a&gt;
              
            &lt;/li&gt;
            &lt;li class="menu-item sub-li"&gt;
              
              &lt;a href=""&gt;sub menu item&lt;/a&gt;
              
            &lt;/li&gt;
          &lt;/ul&gt;
          
        &lt;/li&gt;
      
      
       &lt;/ul&gt;
  
  
      </code></pre>
  </div>
  </div>
  </p>