Why doesn't my
expand width to cover all the
?

Question

I have a nav that I'm trying to create with flexbox. I want the to have a max height, and have the <li> push to a new column when there isn't enough space for it.

I have displayed the <ul> inline-flex. The <li> are jumping on to a new column, but the <ul> doesn't expand with the <li> - causing an overflowing effect

https://codepen.io/Woodenchops/pen/KGOYRK

ul {
      background: red;
      display: inline-flex;
      flex-wrap: wrap;
      flex-direction: column;
      max-height: 350px;
      padding: 1rem;
    }
    
    .sub-ul {
      background: none;
    }
    
    li {
      list-style: none;
      font-size: 46px;
    }
    
    .sub-li {
      font-size: 16px;
    }
    
    
    .oneColumn {
      width: auto;
    }
    
    .twoColumn {
      width: 490px;
    }
    
    .threeColumn {
      width: 980px;
    }

<ul class="sub-menu topul">
      <li class="menu-item"><a href="">item1</a></li>
      <li class="menu-item"><a href="">item2</a></li>
      <li class="menu-item"><a href="">item3</a></li>
      <li class="menu-item"><a href="">item4</a></li>
      <li class="menu-item"><a href="">item5</a></li>
      <li class="menu-item">
       
        <ul class="sub-menu sub-ul">
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
        </ul>
        
      </li>
      
       <li class="menu-item"><a href="">item4</a></li>
      <li class="menu-item">
        
        <ul class="sub-menu sub-ul">
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
          <li class="menu-item sub-li">
            
            <a href="">sub menu item</a>
            
          </li>
        </ul>
        
      </li>
    
    
     </ul>

I believe it is your `max-height` css property; there's not enough room so it spills out — ne1410s, Nov 02 '18 at 16:13
Why wouldn't it wrap though? thats the point of flex-box, no? — WoodenChops, Nov 02 '18 at 16:22

score 0 · Answer 1 · answered Nov 02 '18 at 17:25

I think you need to consider first: is my UL a row that wraps columns or is it a column that wraps rows?? In your case I think the first is true.

What I did was remove flex-direction (we just want the default), all the size restriction classes and the javascript manipulating them.

Because you want a max-height: 350px we need to keep that value. However, you need to deal with the the main ul overflowing, so add (at least) overflow-y: auto, otherwise you will get unexpected overflow issues with other elements in your HTML document.

Finally add some minimal width for your columns as flex-basis to you 'li' elements instead of the javascript.

The below code wraps and overflows just as expected, moreover it is completely under your control.

All that's left is making it look good...

Cheers!

/* javascript removed */

/* debugging, so it's visible what's happening */
*::before,::after,* { outline: 1px dashed }

ul {
  background: red;
  display: inline-flex;
  flex-wrap: wrap;
  max-height: 350px; 
  overflow-x: hidden /* or whatever */;
  overflow-y: auto;
  padding: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
}

li {
  flex: 1 1; /* allow shrink and grow */
  flex-basis: 150px; /* (or some) minimal required column width, will trigger flex overflow */ 
}

.sub-ul {
  background: none;
}

li {
  list-style: none;
  font-size: 46px;
}

.sub-li {
  font-size: 16px;
}

<ul class="sub-menu topul">
  <li class="menu-item"><a href="">item1</a></li>
  <li class="menu-item"><a href="">item2</a></li>
  <li class="menu-item"><a href="">item3</a></li>
  <li class="menu-item"><a href="">item4</a></li>
  <li class="menu-item"><a href="">item5</a></li>
  <li class="menu-item">
   
    <ul class="sub-menu sub-ul">
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
    </ul>
    
  </li>
  
   <li class="menu-item"><a href="">item6</a></li>
  <li class="menu-item">
    
    <ul class="sub-menu sub-ul">
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
      <li class="menu-item sub-li">
        
        <a href="">sub menu item</a>
        
      </li>
    </ul>
    
  </li>


 </ul>

Hey, thanks for that - however, I need the items to stack under each other in a column, not side by side. I used JavaScript to achieve the desired result https://codepen.io/Woodenchops/pen/dQyzyG — WoodenChops, Nov 03 '18 at 13:14

Why doesn't my
expand width to cover all the
?

1 Answers1

Linked

Why doesn't my expand width to cover all the ?

1 Answers1

Linked

Why doesn't my
expand width to cover all the
?