Flex-grow在IE 11上的行为有所不同

Question

[我在IE上使用flexbox进行实验，并注意到与所有其他浏览器相比，我的导航栏在IE上无法正常工作。

一旦右侧的按钮不适合徽标旁边的空白，导航栏应显示在两行上。如果不合适，则使用flex-wrap：wrap将其推到第二行。当它被推到第二行时，它将所有按钮居中在屏幕的整个宽度上。

我通过在徽标和导航栏之间的垫片上使用高挠曲度来解决此问题。这在chrome，edge等上效果很好，但在Internet Explorer 11上效果不好。

我用于测试的演示：https://jsfiddle.net/td2rq4h1/

*{
  box-sizing: border-box;
}

body{
  background: red;
}

.logo{
  background-color: yellow;
  width: 145px;
  height: 70px;
  margin-right: 100px;
}
#headermenu{
  background-color: gray;
  
  .telephone {
    border: 3px solid pink;
  width: 145px;
  height: 30px;
  margin-right: 100px;
  }
}

#menu{
  background-color: blue;
}

.spacer {
  flex-grow: 1000;
  background-color: green;
  display: flex;
  flex-wrap: wrap;
}

.inner-spacer {
  flex-grow: 1;
  flex-basis: 100%;
}

.link {
  flex-grow: 0;
}

nav{
  border: 5px solid black;
  flex: 1 1;
  display: flex;
  justify-content: center;
  
  
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  li{
      border: 2px solid purple;
      background-color: white;
      padding: 1em;
      white-space: pre;
      margin: 0;
      display: inline-block;
    }
<div id="menu" class="d-flex flex-wrap">
  <div class="logo">Logo</div>
  <div class="spacer"></div>
  <nav>
    <ul class="d-flex flex-row">
      <li>Home</li>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li>Nav item 4</li>
      <li>Nav item 5</li>
    </ul>
  </nav>
</div>

有人可以向我解释为什么会发生这种情况，以及我该如何解决？谢谢

我正在IE上使用flexbox进行实验，并注意到与所有其他浏览器相比，我的导航栏在IE上无法正常工作。一旦...

Answer 1

您可以减少对flex: x属性的使用，而改为使用margin ... ...轻按flex值。