css - Hero flex 元素在 IE11 中重叠

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"><a href="">Products</a></li>
      <li class="navigation-link list-inline-item"><a href="">FAQ</a></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 和其他浏览器

互联网浏览器 11

有人有什么想法吗？不太确定这里出了什么问题。

Answer 1

我设法通过应用 .fill-viewport-50 解决了这个问题类到 .hero-content改为行并更改 min-height至 height适用于 IE11+。