Css Chrome和Firefox中引导菜单内的Flexbox布局宽度问题

我试图学习如何使用flexbox，并让flexbox在Chrome&Firefox的引导子菜单中正确显示，但子菜单面板无法正确计算宽度。它几乎从不水平扩展，菜单项只是溢出菜单的边界。在最新版本的IE中查看时，该菜单看起来应该可以使用，但在Chrome/Firefox/Opera中不起作用

这是菜单的结构，dx菜单容器wrap div中有多个ul（为简洁起见，仅显示一个）

我是否需要做一些不同的事情来扩展菜单的宽度以适应Chrome和Firefox中的flexbox容器

所需的菜单行为： 固定高度为400 px，首先从左栏开始垂直填充ul，然后从最左侧位置开始向右扩展/弯曲到其他栏

*在IE工作

---

您可以尝试向下拉包装添加最小宽度，如下所示：

.dx-menu-container-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-grow: 1;
    white-space:nowrap;
    height:400px;
    min-width:300px;
}

下面是flexbox下拉列表的JSFIDLE，最小宽度为：

它似乎在Chrome、FF和IE上也能正常工作

.dx-menu-container-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-grow: 1;
    white-space:nowrap;
    height:400px;
}

.dx-menu-container-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-grow: 1;
    white-space:nowrap;
    height:400px;
    min-width:300px;
}