title: Flexbox Not Centering Vertically in IE
body: <p>I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fills the window until it can't and then adds a scroll bar and fills content off screen, toward the bottom. </p>
  
  <p>However, the page doesn't center in IE11. I can get the page to center in IE by flexing the body, but if I do, then the content starts to go off screen towards the top and cuts off the top of the content.</p>
  
  <p>Below are the two scenarios. See the associated Fiddles. If the problem isn't evident right away, reduce the size of the result window so that it's forced to generate a scroll bar.</p>
  
  <p>Note: This application only targets the latest versions of Firefox, Chrome and IE (IE11), which all have support for the <a href="http://www.w3.org/TR/css3-flexbox/" rel="noreferrer">Candidate Recommendation of Flexbox</a>, so feature compatibility shouldn't be an issue (in theory).</p>
  
  <p><strong>Edit</strong>: When using the Fullscreen API to fullscreen the outer div, all browsers correctly center using the original CSS. However, upon leaving the fullscreen mode, IE reverts back to being horizontally centered and vertically top aligned. </p>
  
  <p><strong>Edit</strong>: IE11 uses non-vendor specific implementation of Flexbox. <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx" rel="noreferrer">Flexible box ("Flexbox") layout updates</a></p>
  
  <hr>
  
  <p><strong>Centers and Resizes Correctly in Chrome/FF, Does Not Center But Resizes Correctly in IE11</strong></p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/Dragonseer/3D6vw/" rel="noreferrer">http://jsfiddle.net/Dragonseer/3D6vw/</a></p>
  
  <pre><code>html, body
  {
      height: 100%;
      width: 100%;
  }
  
  body
  {
      margin: 0;
  }
  
  .outer
  {
      min-width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .inner
  {
      width: 80%;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Centers Correctly in Everywhere, Cuts Off Top When Sized Down</strong></p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/Dragonseer/5CxAy/" rel="noreferrer">http://jsfiddle.net/Dragonseer/5CxAy/</a></p>
  
  <pre><code>html, body
  {
      height: 100%;
      width: 100%;
  }
  
  body
  {
      margin: 0;
      display: flex;
  }
  
  .outer
  {
      min-width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .inner
  {
      width: 80%;
  }
  </code></pre>