Hero flex items overlapping in 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 & other browsers

Internet Explorer 11

Does anyone have any ideas? Not too sure what's going wrong here.

Does it work if you remove `padding-top` from `.navigation-bar`? — Huangism, Jan 25 '18 at 16:42
@DhavalJardosh it's a background image. The container is within a section. The background is applied to the section. — Josh, Jan 25 '18 at 16:58
@Michael_B read my code - the container has the d-flex class applied which makes it a flex item. I'm already applying that fix (#header .container). — Josh, Jan 25 '18 at 17:00
@Josh, your code doesn't reproduce the problem that you're describing, and doesn't match the images you're showing. So it's going to be somewhat of a hit and miss process for anybody trying to help you. If you stick to the guidelines, maybe you can get more precise assistance. — Michael Benjamin, Jan 25 '18 at 17:03

score 0 · Accepted Answer · answered Jan 25 '18 at 18:00

0

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+.

answered Jan 25 '18 at 18:00

Josh

81
9

Hero flex items overlapping in IE11

1 Answers1