Question

我正在尝试使用flexbox创建一个导航。我希望最大高度，并在没有足够空间的情况下将<li>推送到新列。

我已经展示了<ul> inline-flex。 <li>跳到了新的一列，但是<ul>并没有随<li>扩展-导致溢出效果

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>

Answer 1

我认为您需要首先考虑：我的UL是包裹行的行还是是包裹行的行？对于您的情况，我认为第一个是正确的。

我所做的是删除flex-direction（我们只需要默认值），所有大小限制类以及对其进行操作的javascript。

因为您想要max-height: 350px，所以我们需要保留该值。但是，您需要处理主要的ul溢出问题，因此（至少）添加overflow-y: auto，否则您的HTML文档中的其他元素会出现意外的溢出问题。

最后为您的“ li”元素（而非javascript）添加一些最小宽度作为flex-basis列。

下面的代码按预期方式包装和溢出，而且完全在您的控制之下。

剩下的就是让它看起来不错...

干杯！

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

为什么我的<ul>不能扩展宽度以覆盖所有<li>？

1 个答案: