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

Question

我试图在flexbox中创建一个嵌套的导航栏，我想支持IE11。 我使用flex-direction：row;和flex-wrap：wrap;在.navbar上。 我在.nav项目上也这样做。 一切似乎都适用于Chrome和Firefox，但不适用于IE11或Safari。

在IE11和Safari中缩小屏幕时，.navbar中的项目会捕捉到新行。但是.nav中的项目不会发生这种情况。 .nav中的项目保持内联并突破导航栏。

是否可以解决此问题？

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

好的找到了解决这个问题的方法。我删除了flex：0 0 auto;来自.nav，现在一切正常。 我也修改了标记，使事情尽可能简单。

见下面的例子：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;