html - 嵌套的 flexbox 包装在 IE11 和 Safari 中不起作用

Question

我正在尝试在 flexbox 中创建一个嵌套的导航栏，我喜欢支持 IE11。我使用 flex-direction: row;和 flex-wrap: wrap;在 .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

确定找到了解决此问题的方法。我删除了 flex: 0 0 auto;从 .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>