ul widht auto stretch with maximum height

Question

I have an html structure roughly like this:

<ul class="groupmenu-drop">
  <li class="level1"> 
     <a href="#"> BMW </a>
     <ul class="level1 groupmenu-drop">
        <li class="level2"> i3 </li>
        <li class="level2"> i5 </li>
        <li class="level2"> i7 </li>   
    </ul>
  </li>
  <li class="level1"> 
     <a href="#"> Mercedez Benz </a>
     <ul class="level1 groupmenu-drop">
        <li class="level2"> a-class </li>
        <li class="level2"> e-class </li>
        <li class="level2"> c-class </li>
        <li class="level2"> s-class </li>     
    </ul>
  </li> 
</ul>

my current css:

ul.groupmenu-drop{
    display: block;
    text-align: left;
    padding: 0;
    margin: 0;
    position: absolute;
    background: #fff;
    top: 100%;
    z-index: 99; 
    list-style: none none;
    box-sizing: border-box;
}

li{
    list-style: none
    padding: 8px 15px;
    min-width: 230px;
    position: relative;
    margin: 0px auto;
    box-sizing: border-box;
}

.groupmenu-drop > li {
    width: 100%;
}

I want to make the first ul to have maximum height so when the level1 li and its child overlapping the ul height it will make the ul stretch its width and the level1 li will fill it, here's what i want it to look like:

Answer 1

Something like this:

.groupmenu-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.level1 {
  flex-basis: 50%;
}

.groupmenu-drop .groupmenu-drop {
  display: block;
}

<ul class="groupmenu-drop">
  <li class="level1"> 
     <a href="#"> BMW </a>
     <ul class="level1 groupmenu-drop">
        <li class="level2"> i3 </li>
        <li class="level2"> i5 </li>
        <li class="level2"> i7 </li>   
    </ul>
  </li>
  <li class="level1"> 
     <a href="#"> Mercedez Benz </a>
     <ul class="level1 groupmenu-drop">
        <li class="level2"> a-class </li>
        <li class="level2"> e-class </li>
        <li class="level2"> c-class </li>
        <li class="level2"> s-class </li>     
    </ul>
  </li>
  <li class="level1"> 
     <a href="#"> Mercedez Benz </a>
     <ul class="level1 groupmenu-drop">
        <li class="level2"> a-class </li>
        <li class="level2"> e-class </li>
        <li class="level2"> c-class </li>
        <li class="level2"> s-class </li>     
    </ul>
  </li>
</ul>