Flex-grow behaving differently on IE 11

Question

I was experimenting with flexbox on IE and noticed that my navigation bar does not work the same on IE compared to all other browsers.

The navigation bar should appear on two lines as soon as the buttons on the right don't fit in the space right next to the logo. If it doesn't fit, it's pushed on the second line with flex-wrap: wrap. And when it's pushed to the second line it centers all buttons over the entire width of the screen.

I fixed this by using a high flex-grow number on the spacer between the logo and the navigation bar. This works well on chrome, edge, etc, but not on internet explorer 11.

The demo I use for to test this: 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>

Can anybody explain me why this happens and how i could resolve this? Thanks

Answer 1

you may reduce the use of flex: x properties and play with margin instead ... hudge flex value..

example forked from the broken jsfiddle:

* {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

body {
  background: red;
}

.logo {
  background-color: yellow;
  width: 145px;
  height: 70px;
  margin-right: 100px;
}

#headermenu {
  background-color: gray;
}

#headermenu .telephone {
  border: 3px solid pink;
  width: 145px;
  height: 30px;
  margin-right: 100px;
}

#menu {
  background-color: blue;
}

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

nav {
  border: 5px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

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

explanation : IE11 will be soon a decade old and did not update bugs on its flex implementation since. it's been edge since, and even edge will stop being updated.