css - Chrome 和 Firefox 中 Bootstrap 菜单宽度问题中的 Flexbox 布局

Question

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

这是 dx-menu-container-wrap div 内有多个 ul 的菜单结构(为简洁起见，仅显示一个)。

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
      <span class="icon-bar"></span>
    </a>

        <div class="nav-collapse">
            <ul class="nav">
                <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu"> <a href="#">More options</a>

                            <div class="dropdown-menu">
                                <div class="dx-menu-container-wrap">
                                    <ul>
                                        <li>
                                            <p><strong>Category 1</strong>

                                            </p>
                                        </li>

然后 CSS 是:

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

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

菜单的期望行为: 固定高度为 400 px，首先从左列开始垂直填充 ul，然后从最左边的位置开始向右扩展/flex 到其他列。

*适用于 IE

http://jsfiddle.net/cjsmith/2287nv0o/9/

Answer 1

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

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

这是一个具有最小宽度的 Flexbox 下拉列表的 jsfiddle:http://jsfiddle.net/AndrewL32/2287nv0o/11/

它似乎在 Chrome、FF 以及 IE 上运行良好