Html 为什么'；t我的<；ul>；扩展宽度以覆盖所有<；李>；？

我有一个导航，我正试图用flexbox创建。我希望有一个最大高度，并在没有足够空间时将

推到一个新列

我已经显示了内联flex。

正在跳转到一个新列，但是

没有随着

展开-导致溢出效果

ul{
背景：红色；
显示：内联flex；
柔性包装：包装；
弯曲方向：立柱；
最大高度：350px；
填充：1rem；
}
.sub ul{
背景：无；
}
李{
列表样式：无；
字体大小：46px；
}
苏丽先生{
字体大小：16px；
}
.一栏{
宽度：自动；
}
.twoColumn{
宽度：490px；
}
.三列{
宽度：980px；
}

 > p>我想你首先要考虑的是：我的UL是一个包装列的行，还是一个包裹行的列？在你的情况下，我认为第一个是正确的

我所做的是删除
flex-direction
（我们只需要默认值）、所有大小限制类和操纵它们的javascript

因为您需要一个
最大高度：350px
我们需要保留该值。然而，您需要处理主
ul
溢出，所以添加（至少）
overflow-y:auto
，否则HTML文档中的其他元素会出现意外的溢出问题

最后，将列的最小宽度作为
flex-basis
添加到“li”元素中，而不是javascript

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

剩下的就是让它看起来好看

干杯


/*删除javascript*/
/*调试，因此可以看到正在发生的事情*/
*：：之前，：：之后，*{大纲：1px虚线}
保险商实验室{
背景：红色；
显示：内联flex；
柔性包装：包装；
最大高度：350px；
溢出-x：隐藏/*或任何*/；
溢出y：自动；
填充：1rem；
调整内容：灵活启动；
调整项目：灵活启动；
}
李{
弹性：1；/*允许收缩和增长*/
flex basis:150px；/*（或某些）所需的最小列宽将触发flex溢出*/
}
.sub ul{
背景：无；
}
李{
列表样式：无；
字体大小：46px；
}
苏丽先生{
字体大小：16px；
}



























我相信这是你的
最大高度
css属性；没有足够的空间，所以溢出来了。为什么不把它包起来呢？这就是flex box的重点，不是吗？嘿，谢谢你-但是，我需要这些项目在一列中相互堆叠，而不是并排。我使用JavaScript实现了期望的结果