Nested flexbox wrap not working in IE11 and Safari

Question

I'm trying to create a nested navbar in flexbox and I like to support IE11. I use flex-direction: row; and flex-wrap: wrap; on .navbar. And I do the same on the .nav items. Everything seems to work fine on Chrome and Firefox but not in IE11 or Safari.

In IE11 and Safari when I shrink the screen the items in the .navbar snap to a new row. But this does not happen with the items in .nav. The items in .nav stay inline and break out of the navbars box.

Is it possible to fix this issue?

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>

That's strange I had the expected behaviour in Chrome before but this doesn't work since I added prefixes. Firefox still works see https://jsfiddle.net/sgroen/6fwdhjsq. — Smek, Jul 10 '17 at 09:20
Careful using the *flex* property in IE: https://stackoverflow.com/q/32239549/3597276 — Michael Benjamin, Jul 10 '17 at 11:44

score 0 · Answer 1 · answered Jul 10 '17 at 12:44

Ok found a solution for this problem. I removed flex: 0 0 auto; from the .nav and now everything works as it should. I also modified the markup too keep things as simple as possible.

See example below:

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>

Nested flexbox wrap not working in IE11 and Safari

1 Answers1