Flex on Internet Explorer not working

Question

I have the following CSS and HTML code:

.login-body{
    background: url(../img/bg.png) center center no-repeat;
    background-size: cover;
    min-height: 100vh;
    max-height: 100vh;
    height: auto;
    background-color: #26A65B;
    display: -webkit-box;      
    display: -moz-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;     
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.navbar-contarte{
    border-radius: 0px;
    background-color: #27ae60;
}
.navbar-contarte a{
    color: #fff !important;
    border: 0;
}
.col-centered{
    float: none;
    margin: 0 auto;
}
.center-btn-or-img{
    display: block;
    margin: 0 auto;
}
.pub-banner-block{
    text-align: center;
    background-color: rgba(255,255,255, 0.4);
    padding: 20px;
    border-radius: 4px;
    box-shadow: 1px 1px 10px #fff;

}

HTML:

<nav class="navbar navbar-inverse navbar-contarte navbar-fixed-top">
        <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Contarte</a>
            </div>
            <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                <button type="button" class="btn btn-primary navbar-btn">Crear Cuenta</button>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Iniciar Sesión</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="login-body">
        <div class="pub-banner-block">
            <h1>ContarteHN</h1>
            <h2>Contabilidad y Finanzas<br> automatizadas para tu empresa</h2>
            <hr>
            <form method="post" role="form">
                <div class="form-group">
                    <input type="emal" placeholder="email" class="form-control input-lg">
                    <br>
                    <button type="button" class="btn btn-success btn-lg btn-block">Crear Cuenta</button>
                </div>
            </form>
        </div>
    </div>

which works fine for every web explorer except internet explorer. Here are some screenshots about the issue:

And here it is how it looks on internet explorer:

Not sure why internet explorer isn't rendering it as it should be. This web app is suppose to support IE10+ but apparently, IE did it again, it's screwing layout things. Any ideas on how to fix this?

Answer 1

MSN states:

In Internet Explorer 10-11 (but not 12+), a flex declaration with a unitless value in its flex-basis part is considered syntactically invalid and will thus be ignored. A workaround is to always include a unit in the flex-basis part of the flex shorthand value.

In your .login-body class I removed min-height: 100vh; max-height: 100vh; and replaced height:auto (unitless) to height: 80vh;. Now the box is vertically centered (see in the full screen mode):

.login-body{
    background: url(http://kclr96fm.com/wp-content/uploads/2015/01/keyboard.jpg) center center no-repeat;
    background-size: cover;
    height: 80vh;
    background-color: #26A65B;
    display: -webkit-box;      
    display: -moz-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;     
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.navbar-contarte{
    border-radius: 0px;
    background-color: #27ae60;
}
.navbar-contarte a{
    color: #fff !important;
    border: 0;
}
.col-centered{
    float: none;
    margin: 0 auto;
}
.center-btn-or-img{
    display: block;
    margin: 0 auto;
}
.pub-banner-block{
    text-align: center;
    background-color: rgba(255,255,255, 0.4);
    padding: 20px;
    border-radius: 4px;
    box-shadow: 1px 1px 10px #fff;

}

<nav class="navbar navbar-inverse navbar-contarte navbar-fixed-top">
        <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Contarte</a>
            </div>
            <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                <button type="button" class="btn btn-primary navbar-btn">Crear Cuenta</button>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Iniciar Sesión</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="login-body">
        <div class="pub-banner-block">
            <h1>ContarteHN</h1>
            <h2>Contabilidad y Finanzas<br> automatizadas para tu empresa</h2>
            <hr>
            <form method="post" role="form">
                <div class="form-group">
                    <input type="emal" placeholder="email" class="form-control input-lg">
                    <br>
                    <button type="button" class="btn btn-success btn-lg btn-block">Crear Cuenta</button>
                </div>
            </form>
        </div>
    </div>