title: IE11 issue with absolutely positioned flexbox takes up width of parent instead of contents
body: <p>Simple repro:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div style="display: inline-block; position: relative; border: 1px solid black;"&gt;
          short
          &lt;div style="display: flex; position: absolute; border: 1px solid black; top: 100%; left: 0;;"&gt;longerbox&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The flexbox element (longerbox) does not take up the width of its content like it does on Chrome. Is there a fix for this?</p>
  
  <p><a href="https://i.stack.imgur.com/EXxxI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EXxxI.png" alt="enter image description here"></a></p>