internet explorer - Flexbox Not Centering Vertically in IE

Question

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.

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.

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.

Note: This application only targets the latest versions of Firefox, Chrome and IE (IE11), which all have support for the Candidate Recommendation of Flexbox, so feature compatibility shouldn't be an issue (in theory).

Edit: 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.

Edit: IE11 uses non-vendor specific implementation of Flexbox. Flexible box ("Flexbox") layout updates

---

Centers and Resizes Correctly in Chrome/FF, Does Not Center But Resizes Correctly in IE11

Fiddle: http://jsfiddle.net/Dragonseer/3D6vw/

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%;
}

---

Centers Correctly in Everywhere, Cuts Off Top When Sized Down

Fiddle: http://jsfiddle.net/Dragonseer/5CxAy/

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%;
}

Answer 1

I found that ie browser have problem to vertically align inner containers, when only the min-height style is set or when height style is missing at all. What I did was to add height style with some value and that fix the issue for me.

for example :

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

So now we have height style, but the min-height will overwrite it. That way ie is happy and we still can use min-height.

Hope this is helpful for someone.