ul widht自动伸展，最大高度

Question

我的html结构大致如下：

<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>

我目前的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%;
}

我想让第一个ul具有最大高度，所以当level1 li及其子项重叠ul高度时，它将使ul拉伸其宽度，level1 li将填充它，这就是我想要的它看起来像：

Answer 1

这样的事情：

＆＃13;

＆＃13;

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

.level1 {
  flex-basis: 50%;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试此操作，使用flex-flow: column wrap;将li显示为列，将根据需要进行换行或垂直可用空间。

.groupmenu-drop:not(.level1) {
  max-height: 200px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
}

<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="#"> Audi </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>