title: Flexbox container with position absolute doesn't fit content width in IE
body: <p>I'm new to flexbox, my problem is the following :</p>
  
  <p>I have a sub-menu on my navigation positioned absolutely and using flexbox.</p>
  
  <p>Everything works fine in Chrome / Firefox, didn't test Safari.</p>
  
  <p>IE11 is showing my submenu but its children elements are overflowing (which is breaking my <code>:hover</code>).</p>
  
  <p>Check this codepen in IE to see the problem (simplified version) :</p>
  
  <p><a href="https://codepen.io/CamilleVerrier/pen/GvLojN" rel="nofollow noreferrer">https://codepen.io/CamilleVerrier/pen/GvLojN</a> </p>
  
  <p>I tried a lot of things suggested in StackOverflow or CanIUse, like setting flex propriety individually :</p>
  
  <pre><code>ul.sub-menu li {
      flex-grow:0;
      flex-shrink:1;
      flex-basis:0px;
  }
  </code></pre>
  
  <p>But it doesn't seem to work. </p>
  
  <p>During my tests, I found that if I remove <code>position:absolute</code>, everything is working again (but my menu breaks obviously).</p>
  
  <p>So... is the solution to return to inline-block or float ? (please no ahah)</p>
  
  <p>Thanks ! (and sorry for my english)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Accueil&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li class="menu-metier"&gt;&lt;a href="#"&gt;&lt;span&gt;Notre métier&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;img width="170" height="102" src="http://lorempixel.com/170/102"&gt;
            &lt;span&gt;Séminaire et Incentive&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;img width="170" height="102" src="http://lorempixel.com/170/102"&gt;
            &lt;span&gt;Congrès et rencontres&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;img width="170" height="102" src="http://lorempixel.com/170/102"&gt;
            &lt;span&gt;Communication Design&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;
        &lt;span&gt;L’agence&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;
        &lt;span&gt;Photos&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>