Can't vertically center content with Flexbox on IE11 - html

Question

So, i'm triyng´to vertically center 2 divs with flexbox, it centers on all major browsers but it doesn't center properly on IE11.
Searching about this i found that there's a problem centering divs with min-height, but i'm not using it, so i don't know what is wrong or missing.
JSFiddle
.container {
position: relative;
display: flex;
align-items: center;
}
img {
max-width: 100%;
}
.prev {
width: 40px;
height: 40px;
background: rgba(0,0,0,.8);
position: absolute;
left: 30px;
}
.next {
width: 40px;
height: 40px;
background: rgba(0,0,0,.8);
position: absolute;
right: 30px;
}
<div class="container">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<div class="prev"></div>
<div class="next"></div>
</div>

Answer 1

You can remove the flexbox rules, and instead vertically center your divs using transform...
fiddle
.container {
position: relative;
}
img {
max-width: 100%;
display: block;
/* added */
}
.prev,
.next {
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(0, 0, 0, .8);
position: absolute;
}
.prev {
left: 30px;
}
.next {
right: 30px;
}
<div class="container">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<div class="prev"></div>
<div class="next"></div>
</div>
Alternatively, if you want to keep the flexbox rules, you can add top, bottom and margin properties to satisfy IE.
fiddle
.container {
position: relative;
display: flex;
align-items: center;
}
img {
max-width: 100%;
display: block; /* added */
}
.prev,
.next {
top: 0;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, .8);
position: absolute;
}
.prev {
left: 30px;
}
.next {
right: 30px;
}
<div class="container">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
<div class="prev"></div>
<div class="next"></div>
</div>