嵌套的弹性框换行在 IE11 和 Safari 中不起作用

Question

我正在尝试在flexbox中创建一个嵌套的导航栏，我喜欢支持IE11。 我使用弹性方向：行;和弹性包装：包装;在 .navbar 上。 我对 .nav 项目也这样做。 一切似乎在Chrome和Firefox上都运行良好，但在IE11或Safari中则不然。

在IE11和Safari中，当我缩小屏幕时，.navbar中的项目会捕捉到新行。但这不会发生在 .nav 中的项目上。 .nav 中的项保持内联并脱离导航栏框。

是否可以解决此问题？

body {
font-size: 16px;
}
.navbar {
width: 100%;
background-color: blue;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.logo {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.left {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.right {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.nav {
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.nav li {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: .8em 1em;
}

<div class="navbar">
<div class="logo">
<ul class="nav">
<li>My Company</li>
</ul>
</div>
<div class="left">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Settings</li>
</ul>
</div>
<div class="right">
<ul class="nav">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>

Answer 1

好的，找到了这个问题的解决方案。我删除了弹性：0 0 自动;从 .nav 到现在一切正常。 我还修改了标记，使事情尽可能简单。

请参阅以下示例：

body {
font-size: 16px;
}
.logo {
padding-right: 30px;
}
.navbar {
width: 100%;
background-color: blue;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.nav {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.nav li {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
padding: .8em 1em;
}

<nav class="navbar">
<ul class="nav">
<li class="logo">My Company</li>
<li>Home</li>
<li>About</li>
<li>Settings</li>
</ul>
<ul class="nav right">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</nav>