Mozilla flexbox не работает с строкой начальной загрузки

Question

Я использую контейнер начальной загрузки 3, внутри есть col-sm-4 и col-sm-offset-4 для центрирования формы внутри. Я бы хотел центрировать форму по вертикали с помощью flexbox, он работает в Chrome и Safari, но с Mozilla он не работает.

#login {
height: 100vh;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

}

мой контейнер выше

Мой HTML-код:

<div class="container" id="login">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4 centered">
            <div class="well">
                <form action="login.php" autocomplete="off" id="Login_Form" method="post" name="Login_Form">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true" class="fa fa-user fa-fw"></i></span> <input class="form-control" name="Username" placeholder="Nutzername">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true" class="fa fa-shield fa-fw"></i></span> <input class="form-control" name="Password" placeholder="Passwort" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary full-width-button" name="Submit" value="Login">Anmelden</button>
                    </div>
                    <table class="errormessage_table">
                        <?php if(isset($msg)){?>
                        <tr>
                            <td class="errormessage"><?php echo $msg;?></td>
                        </tr><?php } ?>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>

как... контейнер такой маленький, в сафари контейнер намного больше и не отрезан

Safari & Chrome Mozilla Firefox

Надеюсь, кто-нибудь может мне помочь:)

Answer 1

Для достижения ожидаемого результата снимите дисплей: flex

#login {
  height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

http://codepen.io/nagasai/pen/zBjkWw