Hero flex items overlapping in IE11 - css

Question

.fill-viewport-50 {
min-height: 50%;
min-height: 50vh;
}
.navigation-bar {
display: flex;
padding-top: 2rem;
margin-bottom: auto;
height: $navigation-bar-height;
justify-content: flex-end;
}
.hero-content {
margin-top: -$navigation-bar-height;
margin-bottom: auto;
}
#header .container {
flex-direction: column;
justify-content: center;
}
<div class="container d-flex fill-viewport-50">
<div class="navigation-bar align-items-center">
<span class="navigation-brand">
Ware Aquatics
</span>
<ul class="d-none d-md-block navigation-links list-inline">
<li class="navigation-link list-inline-item"><a {{ Request::is( '/') ? 'class=active-link': null }} href="{{ route('index') }}">Home</a></li>
<li class="navigation-link list-inline-item"><a {{ Request::is( 'livestock') ? 'class=active-link': null }} href="{{ route('livestock') }}">Livestock</a></li>
<li class="navigation-link list-inline-item">Products</li>
<li class="navigation-link list-inline-item">FAQ</li>
<li class="navigation-link list-inline-item"><a {{ Request::is( 'contact') ? 'class=active-link': null }} href="{{ route('contact') }}">Contact Us</a></li>
</ul>
</div>
<div class="hero-content">
<div class="row">
<div class="col-12">
<h1>#yield('title')</h1>
<h2>#yield('subtitle')</h2>
</div>
</div>
</div>
</div>
Chrome & other browsers
Internet Explorer 11
Does anyone have any ideas? Not too sure what's going wrong here.

Answer 1

I managed to fix this by applying the .fill-viewport-50 class to the .hero-content row instead and changing min-height to height for IE11+.