I'm working for the first time with flexbox but I've got an internet explorer problem.
In chrome it looks good. But in internet explorer everything is aligned to the right. How could I fix this?
I already tried to add a default height and min-height described here but not working :(
Any ideas?
.column {
max-width: 1000px;
margin: auto;
}
.row {
display: flex;
}
.panel {
padding: 10px;
width: 100%;
background: #fff;
margin-bottom: 50px;
border: 1px solid #eaeaea;
}
.center {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
.column-small {
max-width: 350px;
margin: auto;
}
.brand {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background: #f5f5f1;
color: #002e5b;
width: 100%;
height: 50px;
}
.form-group-item {
width: 100%;
border-radius: 4px;
border: 1px solid #f2f2f2;
font-size: 15px;
box-shadow: none;
outline: none;
line-height: 1.5em;
margin-top: 10px;
margin-bottom: 10px;
height: 45px;
text-indent: 5px;
}
.btn-main {
border: none;
border-radius: 5px;
font-weight: 500;
font-size: 16px;
background: #002e5b;
color: #fff;
padding: 10px 45px;
}
.full-width {
width: 100%;
}<div class="column">
<div class="row">
<div class="panel center">
<div class="column-small">
<div class="brand">
Login
</div>
<form>
<input name="email" class="form-group-item" autofocus="autofocus" required="required" type="email" placeholder="Email">
<input name="password" class="form-group-item" required="required" type="password" placeholder="Wachtwoord">
<button class="btn-main full-width" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
