IE 11, Flexbox, and Absolute Positioning Not Working

Question

This is how Chrome renders my HTML in Windows 10:

And this is how Internet Explorer 11 renders my HTML in Windows 10:

Notice that in Chrome you can see all of the submenu links, but in Internet Explorer 11 you can't. What can I do to make it work in Internet Explorer 11?

Here is my code:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-width: 1280px;
}

a {
  color: #000;
  text-decoration: none;
}

a.active {
  color: #f00;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
}

.menu > li {
  position: relative;
  font-size: 18px;
}

.menu > li + li {
  margin-left: 100px;
}

.submenu {
  position: absolute;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.submenu-4,
.submenu-5 {
  right: 0;
}

.submenu li {
  font-size: 14px;
  white-space: nowrap;
}

.submenu > li + li {
  margin-left: 25px;
}

a:not(.active) + ul {
  display: none;
}

<nav>
  <ul class="menu">
    <li>
      <a href="#">Top Level Link 1</a>
      <ul class="submenu submenu-1">
        <li><a href="#">Submenu 1 Link 1</a></li>
        <li><a href="#">Submenu 1 Link 2</a></li>
        <li><a href="#">Submenu 1 Link 3</a></li>
        <li><a href="#">Submenu 1 Link 4</a></li>
        <li><a href="#">Submenu 1 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 2</a>
      <ul class="submenu submenu-2">
        <li><a href="#">Submenu 2 Link 1</a></li>
        <li><a href="#">Submenu 2 Link 2</a></li>
        <li><a href="#">Submenu 2 Link 3</a></li>
        <li><a href="#">Submenu 2 Link 4</a></li>
        <li><a href="#">Submenu 2 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 3</a>
      <ul class="submenu submenu-3">
        <li><a href="#">Submenu 3 Link 1</a></li>
        <li><a href="#">Submenu 3 Link 2</a></li>
        <li><a href="#">Submenu 3 Link 3</a></li>
        <li><a href="#">Submenu 3 Link 4</a></li>
        <li><a href="#">Submenu 3 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="active">Top Level Link 4</a>
      <ul class="submenu submenu-4">
        <li><a href="#">Submenu 4 Link 1</a></li>
        <li><a href="#">Submenu 4 Link 2</a></li>
        <li><a href="#">Submenu 4 Link 3</a></li>
        <li><a href="#">Submenu 4 Link 4</a></li>
        <li><a href="#">Submenu 4 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 5</a>
      <ul class="submenu submenu-5">
        <li><a href="#">Submenu 5 Link 1</a></li>
        <li><a href="#">Submenu 5 Link 2</a></li>
        <li><a href="#">Submenu 5 Link 3</a></li>
        <li><a href="#">Submenu 5 Link 4</a></li>
        <li><a href="#">Submenu 5 Link 5</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

The problem seems to be that IE11 is not recognizing the right: 0 offset applied to the absolutely-positioned flex container (.submenu).

Considering the layout works in Chrome and Firefox, the problem is likely a bug in IE11, which wouldn't be a surprise.

On the popular browser compatibility website caniuse.com, IE11 used to have a full green badge for flexbox. That means IE11 provides full support. Recently, however, IE11 was downgraded to pale green, meaning partial support, due to a large amount of bugs present.

Here's a simple workaround:

.submenu {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;  /* <-- ADD THIS */
}

The flex-direction property determines the direction in which flex items are laid out. The default setting is flex-direction: row. With row-reverse (and column-reverse) the main-start and main-end directions are swapped.

This fixes the problem in IE11, without breaking anything in other browsers.

However, it does reverse the order of the links in all browsers.

To address that issue you can reverse the order of the links in the source, or use the flex order property to reverse the order on the screen only:

.submenu-4 > li:nth-child(1) { order: 5 ; }
.submenu-4 > li:nth-child(2) { order: 4 ; }
.submenu-4 > li:nth-child(3) { order: 3 ; }
.submenu-4 > li:nth-child(4) { order: 2 ; }
.submenu-4 > li:nth-child(5) { order: 1 ; }

Full code (tested in Firefox, Chrome and IE11):

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-width: 1280px;
}

a {
  color: #000;
  text-decoration: none;
}

a.active {
  color: #f00;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
}

.menu > li {
  position: relative;
  font-size: 18px;
}

.menu > li + li {
  margin-left: 100px;
}

.submenu {
  position: absolute;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row-reverse;                   /* NEW */
}

.submenu-4,
.submenu-5 {
  right: 0;
}

.submenu li {
  font-size: 14px;
  white-space: nowrap;
}

.submenu > li + li {
  margin-left: 25px;
}

a:not(.active) + ul {
  display: none;
}

.submenu-4 > li:nth-child(1) { order: 5 ; }        /* NEW */
.submenu-4 > li:nth-child(2) { order: 4 ; }        /* NEW */
.submenu-4 > li:nth-child(3) { order: 3 ; }        /* NEW */
.submenu-4 > li:nth-child(4) { order: 2 ; }        /* NEW */
.submenu-4 > li:nth-child(5) { order: 1 ; }        /* NEW */

<nav>
  <ul class="menu">
    <li>
      <a href="#">Top Level Link 1</a>
      <ul class="submenu submenu-1">
        <li><a href="#">Submenu 1 Link 1</a></li>
        <li><a href="#">Submenu 1 Link 2</a></li>
        <li><a href="#">Submenu 1 Link 3</a></li>
        <li><a href="#">Submenu 1 Link 4</a></li>
        <li><a href="#">Submenu 1 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 2</a>
      <ul class="submenu submenu-2">
        <li><a href="#">Submenu 2 Link 1</a></li>
        <li><a href="#">Submenu 2 Link 2</a></li>
        <li><a href="#">Submenu 2 Link 3</a></li>
        <li><a href="#">Submenu 2 Link 4</a></li>
        <li><a href="#">Submenu 2 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 3</a>
      <ul class="submenu submenu-3">
        <li><a href="#">Submenu 3 Link 1</a></li>
        <li><a href="#">Submenu 3 Link 2</a></li>
        <li><a href="#">Submenu 3 Link 3</a></li>
        <li><a href="#">Submenu 3 Link 4</a></li>
        <li><a href="#">Submenu 3 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="active">Top Level Link 4</a>
      <ul class="submenu submenu-4">
        <li><a href="#">Submenu 4 Link 1</a></li>
        <li><a href="#">Submenu 4 Link 2</a></li>
        <li><a href="#">Submenu 4 Link 3</a></li>
        <li><a href="#">Submenu 4 Link 4</a></li>
        <li><a href="#">Submenu 4 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 5</a>
      <ul class="submenu submenu-5">
        <li><a href="#">Submenu 5 Link 1</a></li>
        <li><a href="#">Submenu 5 Link 2</a></li>
        <li><a href="#">Submenu 5 Link 3</a></li>
        <li><a href="#">Submenu 5 Link 4</a></li>
        <li><a href="#">Submenu 5 Link 5</a></li>
      </ul>
    </li>
  </ul>
</nav>

jsFiddle