我有一个正在尝试使用 Flexbox 创建的导航。我希望有一个最大高度，并且有<li>当没有足够的空间时推入新列。
我已经显示了<ul>内联柔性。这<li>正在跳到一个新专栏，但是<ul>不随<li>- 造成溢出效果
https://codepen.io/Woodenchops/pen/KGOYRK 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>
我认为你需要首先考虑：我的UL是包裹列的行还是包裹行的列？就你的情况而言，我认为第一个是正确的。
我所做的是删除flex-direction（我们只想要默认值）、所有大小限制类以及操作它们的 javascript。
因为你想要一个max-height: 350px我们需要保持这个价值。但是，您需要处理主要的ul溢出，所以添加（至少）overflow-y: auto，否则您的 HTML 文档中的其他元素将会出现意外的溢出问题。
最后为您的列添加一些最小宽度flex-basis给你'li'元素而不是javascript。
下面的代码按照预期进行换行和溢出，而且完全在您的控制之下。
剩下的就是让它看起来不错......
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
