title: Flex Container in IE 11 not aligning properly
body: <p>I have a problem with the following snippet: I need to make it work in Internet Explorer 11. In Chrome, Firefox and Edge it looks like it should.</p>
  
  <p>There are 3 elements (red, yellow, green), beneeth each other. Another blue element with 50% of the height is on top of the others.
  <strong>This is how it should look like:</strong>
  <a href="https://i.stack.imgur.com/pn09u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pn09u.png" alt="This is how it should look like"></a></p>
  
  <p>However Internet Explorer 11 puts the blue element on the right side beneeth the others and not on top of them. Can you guys help me with that problem?</p>
  
  <p><strong>This is how it looks in IE11 - it should not look like this</strong>
  <a href="https://i.stack.imgur.com/Duodx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Duodx.png" alt="This is how it NOT should look like"></a></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-css lang-css prettyprint-override"><code>.wrapper {
      display: block;
      height: 50px;
  }
  
  .flex-wrapper {
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      margin: 2px 0;
  }
  
  .outer,
  .inner {
      width: 100%;
      max-width: 100%;
      display: flex;
  }
  
  .outer {
      height: 100%;
  }
  
  .inner {
      height: 30%;
      align-self: center;
      position: absolute;
  }
  
  .inner-element,
  .outer-element {
      height: 100%;
      max-width: 100%;
      align-self: flex-start;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div class="flex-wrapper"&gt;
      &lt;div class="outer"&gt;
          &lt;div class="outer-element" style="width: 10%; background-color: red"&gt;&lt;/div&gt;
          &lt;div class="outer-element" style="width: 50%; background-color: yellow"&gt;&lt;/div&gt;
          &lt;div class="outer-element" style="width: 40%; background-color: green"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="inner"&gt;
          &lt;div class="inner-element" style="width: 50%; background-color: blue"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>