Flexbox container doesn't align items right in IE 11 - css

Question

Flexbox container shows aligned items wrong in IE 11
<div class="outer-container">
<div class='container'>
<div class="pointer">
<div class="point-wrapper">
<div class="point">1</div>
</div>
</div>
<div class="pointer">
<div class="point-wrapper">
<div class="point">2</div>
</div>
</div>
<div class="pointer">
<div class="point-wrapper">
<div class="point">3</div>
</div>
</div>
<div class="pointer">
<div class="point-wrapper">
<div class="point">4</div>
</div>
</div>
</div>
</div>
.outer-container {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-start;
padding: 1.25rem 0;
}
.container {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0 0 0 1.25rem;
flex: 1
}
.container:after {
content: '';
position: absolute;
right: 20px;
bottom: 10px;
left: 20px;
height: 5px;
top: 48px;
display: block;
z-index: 1;
background-color: #666664;
}
.pointer {
position: relative;
width: 50px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.point-wrapper {
position: relative;
height: 6.375rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.point {
width: 10px;
height: 10px;
border-radius: 50%;
box-sizing: border-box;
color: white;
font-size: 10px;
line-height: 1.875rem;
text-align: center;
background-color: #666664;
}
Here is my code: JSfiddle
That's how it looks in Chrome:
https://monosnap.com/file/bBTFUPA0LmTlrghz3OrZUeYJGemUYN
And that's how IE 11 renders it: https://monosnap.com/file/E4PPmBTgOrMsnR0SGGQ9yByo78nZ5X
I tried to play with different flexbox properties but didn't achieve any result.