title: Element with a child element that has flex-direction: column and max-height; width not expanding when items wrap
body: <p>I have a nav menu with submenus that show when <code>li</code> elements are hovered.</p>
  <p>See below HTML/CSS (hover over Nav 1 to see the issue). The <code>.submenu</code> element has a <code>max-height</code> and is set as <code>flex-direction: column</code>, but I want the pink area to expand when the child items wrap to fit the space? Why is the pink area only covering one 'column'? I want it to cover all of the yellow area... (ie. so that the background of the submenu covers all the children)</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>.nav {
    display: flex;
    list-style: none;
  }
  
  .nav li {
    margin: 10px;
    background: aqua;
    width: 100px;
  }
  
  .menu-item {
    position: relative;
  }
  
  .submenu {
    display: none;
    position: absolute;
    background-color: pink;
    max-height: 300px;
  }
    
  .submenu  ul {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
    
  .submenu  li {
    background-color: yellow;
  }
  
  .menu-item:hover .submenu {
    display: flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="nav"&gt;
    &lt;li class="menu-item"&gt;Nav 1
      &lt;div class="submenu"&gt;
        &lt;ul&gt;
          &lt;li&gt;Subnav 1&lt;/li&gt;
          &lt;li&gt;Subnav 2&lt;/li&gt;
          &lt;li&gt;Subnav 3&lt;/li&gt;
          &lt;li&gt;Subnav 4&lt;/li&gt;
          &lt;li&gt;Subnav 5&lt;/li&gt;
          &lt;li&gt;Subnav 6&lt;/li&gt;
          &lt;li&gt;Subnav 7&lt;/li&gt;
          &lt;li&gt;Subnav 8&lt;/li&gt;
          &lt;li&gt;Subnav 9&lt;/li&gt;
          &lt;li&gt;Subnav 10&lt;/li&gt;
          &lt;li&gt;Subnav 11&lt;/li&gt;
          &lt;li&gt;Subnav 12&lt;/li&gt;
          &lt;li&gt;Subnav 13&lt;/li&gt;
          &lt;li&gt;Subnav 14&lt;/li&gt;
          &lt;li&gt;Subnav 15&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;Nav 2&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>