Flexbox container with position absolute doesn't fit content width in IE

Question

I'm new to flexbox, my problem is the following :

I have a sub-menu on my navigation positioned absolutely and using flexbox.

Everything works fine in Chrome / Firefox, didn't test Safari.

IE11 is showing my submenu but its children elements are overflowing (which is breaking my :hover).

Check this codepen in IE to see the problem (simplified version) :

https://codepen.io/CamilleVerrier/pen/GvLojN

I tried a lot of things suggested in StackOverflow or CanIUse, like setting flex propriety individually :

ul.sub-menu li {
    flex-grow:0;
    flex-shrink:1;
    flex-basis:0px;
}

But it doesn't seem to work.

During my tests, I found that if I remove position:absolute, everything is working again (but my menu breaks obviously).

So... is the solution to return to inline-block or float ? (please no ahah)

Thanks ! (and sorry for my english)

/* General styles */

body {
  background: tomato;
  font-size: 1.2rem;
  font-weight: bold
}

a {
  color: black;
  text-decoration: none;
}

li {
  list-style: none;
}

ul li {
  font-size: 1.6rem;
  display: inline-block;
  margin-left: 40px;
  text-transform: uppercase;
}

ul li.menu-metier {
  position: relative;
  padding-bottom: 25px;
}


/* SubMenu */

ul.sub-menu {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  position: absolute;
  background: white;
  top: 45px;
  left: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

ul.sub-menu li {
  margin: 10px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

ul.sub-menu li a {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

ul.sub-menu li a img {
  padding: 0;
  margin-bottom: 5px;
  align-self: center;
}

ul.sub-menu li a span {
  text-align: center;
  font-size: 1rem;
  align-self: center;
}

<ul>
  <li><a href="#"><span>Accueil</span></a></li>
  <li class="menu-metier"><a href="#"><span>Notre métier</span></a>
    <ul class="sub-menu">
      <li>
        <a href="#">
          <img width="170" height="102" src="http://lorempixel.com/170/102">
          <span>Séminaire et Incentive</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img width="170" height="102" src="http://lorempixel.com/170/102">
          <span>Congrès et rencontres</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img width="170" height="102" src="http://lorempixel.com/170/102">
          <span>Communication Design</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      <span>L’agence</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span>Photos</span>
    </a>
  </li>
</ul>

Answer 1

The problem is not related to flexbox.

It's an issue of absolute positioning rendering variations among browsers.

When you set position: relative on an element it sets the bounding box for descendants with position: absolute.

In Chrome, the absolutely-positioned descendants are permitted to overflow the bounding box.

In IE11, they are not. The absolutely-positioned elements are cut-off once the limit of the bounding box is reached.

One workaround would be to remove position: relative from the container. Now the absolutely-positioned submenu has a larger bounding box (based on the nearest positioned ancestor or, if none exist, the initial containing block (i.e., the viewport)).

ul li.menu-metier {
   /* position: relative; */
   padding-bottom: 25px;
}

revised demo

Another workaround would be to adjust the right offset to accommodate the content.

ul.sub-menu {
    right: -600px;
}

revised demo

You can also try setting a width.

None of these options are pretty. But then again, we're dealing with IE.

You may find other workarounds via search.