Flexbox wrap not increasing the width of parent?

Question

Im trying to create a menu where i have a sub sub menu. After alot of research i come to this result:

codepen

<div id="test">
  <ul id="menu">
    <li class="single">
      <a href="#">test</a>
    </li>
    <li class="dropdown">
      <a href="#">dropdown</a>
      <ul class="submenu">
        <li class="dropdown">
          <a href="#">a</a>
          <ul class="submenu">
            <li class="single">
              <a href="#">aa</a>
            </li>
            <li class="single">
              <a href="#">aa</a>
            </li>
            <li class="single">
              <a href="#">aa</a>
            </li>
            <li class="single">
              <a href="#">aa</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#">b</a>
          <ul class="submenu">
            <li class="single">
              <a href="#">bb</a>
            </li>
            <li class="single">
              <a href="#">bb</a>
            </li>
            <li class="single">
              <a href="#">bb</a>
            </li>
            <li class="single">
              <a href="#">bb</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#">c</a>
          <ul class="submenu">
            <li class="single">
              <a href="#">cc</a>
            </li>
            <li class="single">
              <a href="#">cc</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#">d</a>
          <ul class="submenu">
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
            <li class="single">
              <a href="#">dd</a>
            </li>
          </ul>
        </li>

      </ul>
    </li>
  </ul>
</div>

#test {
  z-index: 9999;
  position: relative;

  ul#menu {
    display: flex;

    li {
      padding: .5rem;
      min-width: 6rem;
      width: auto;

      ul.submenu {
        display: none;
        background: black;
        flex-direction: column;
        position: absolute;
        min-height: 100%;

        a {
          color: white;
          display: flex;
          width: 100%;
          height: 100%;
        }

        &:hover {
          display: flex;
        }

        ul.submenu {
          height: 100%;
          position: absolute;
          left: 100%;
          top: 0;
          min-height: 100%;
          max-height: 100%;
          background: green;
          flex-wrap: wrap;

        }
      }

      &:hover {
        >ul.submenu {
          display: flex;
        }
      }
    }
  }
}

But i got one nasty question where i can't find any proper documentation on (probably my google skills suck). When you see the "dd" submenu it does wrap like i would, but the green background isn't going behind the LI items. With other words when the items wrap the container "ul.submenu" doesn't grow in width where i would like it to grow.

I have tried setting other display modes on the li's but that didn't work. Neither does a min-with of 100% on the submenu. So im kinda stuck.

Anyone has the solution (it's probably such an answer where i smash my head on my keyboard and say "duh") i would very much appreciatie your time and effort!!