Nick Nick - 5 months ago 87
CSS Question

IE 11, Flexbox, and Absolute Positioning Not Working

This is how Chrome renders my HTML in Windows 10:

Chrome

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

Internet Explorer 11

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

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 fine 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 simply reverse the order of the links in the source, or simply 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:

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

Total adjustment: Six new lines of CSS code. Tested in Firefox, Chrome and IE11.