• Clever Geek Handbook

    Ul widht auto stretch with max height

    I have an html structure something 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 the first ul to have a maximum height, so when level1 li and its children overlap the height of the ul, this will cause the ul to stretch its width and level1 li will fill it, this is what I want it to look like

    sketch

    +3


    source to share


    2 answers


    Try this using flex-flow: column wrap;

    will display li

    as columns, will and optionally be wrapped or will have vertical space available.



    .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>
    Run code


    +1


    source


    Something like that:



    .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>
    Run code


    +2


    source






    More articles:


    All Articles