CSS vertically space even divs in IE 11 - css

Question

I was creating a layout which worked in the latest updated browsers (Firefox, Chrome, ...) and then opened the layout in IE 11 and saw a difference. My layout in IE looks like this:
But in every other tested browser the space on the right sided divs is evenly between them, which means that the third div stays on the bottom, while the second divs is right in the middle. I can't get it working in IE 11 and hoped that someone from here has a good advice.
https://jsfiddle.net/1gq2cj3f/2/
<article class="col-12 content-wrapper">
<div class="row content-wrapper-materials">
<div class="col-12 col-lg-6 materials-sectors">
<div class="card materials-sectors-general">
<div class="row no-gutters">
<div class="col-12">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="568px" height="430px">
</a>
</div>
<div class="card-img-overlay">
<h3 class="card-title">
Allgemein </h3>
</div>
</header>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 materials-sectors">
<div class="materials-sectors-specific">
<div class="card specific-construction">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
<div class="card specific-healthcare">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
<div class="card specific-ict">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
.content-wrapper > div {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
padding-top: 8rem;
padding-bottom: 8rem;
}
.card > * {
flex: 0 0 auto;
}
.materials-sectors .card-header {
height: 100%;
padding: 0;
border-bottom: 0;
background-color: rgba(242, 241, 241, 1) !important;
}
.materials-sectors .card-image {
height: 100%;
}
.materials-sectors .card-img-top {
-o-object-fit: cover;
object-fit: cover;
}
.materials-sectors-general .card-img-overlay {
bottom: 2rem;
padding: 0.75rem;
}
.materials-sectors .card-img-overlay {
background-color: rgba(255, 255, 255, 0.25);
top: auto;
}
.card-img-overlay > h3 {
font-size: 1rem;
margin-bottom: 0;
}
.materials-sectors-specific {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.materials-sectors-specific > .card {
height: 100%;
}
.materials-sectors-specific .card-image {
display: block;
}
.materials-sectors-specific > div:nth-of-type(2) {
margin-top: 1rem;
margin-bottom: 1rem;
}