Firefox 中 Flexbox 的奇怪行为

Question

我没有太多的网页设计经验，因此我对遇到的问题有点不知所措。在此页面上link我将鼠标悬停在弹出菜单上。在弹出窗口中，很少有子类别有自己的子类别。如果有很多深度 3 子类别，它们应该换行到新行，这在 chrome 上成功实现，但在 firefox 和 safari 上却没有成功。看起来 Firefox 没有正确地承认实际内容比它想象的要大？无论如何，如果有人能给我一些关于如何克服这个问题的建议，我将不胜感激。

它在 Firefox 上的样子：

它在 Chrome 上的样子：

Answer 1

浏览器通过它们的“自己的”制作一些 scss，所以 Chrome 的行为可能会有所不同，因为它限制了 div 的高度，我在菜单弹出窗口上做了一个退出视图，并且可能会改变一点 改变1 改变2

您可以为包含项目的 ul 或 div 设置最小宽度和最大高度，以确保它们有足够的空间，也可以做一些元素不重叠的操作 示例在这里

更好地理解 Flexbox 的一个好方法是在这个 Web Flexbox 技巧 小心列表内的列表（li 内的 ul 和另一个 ul）

希望这有帮助