CODEWITHSUNDEEP
htmlcssflexbox
onTheInternet
onTheInternet

Reputation: 7253

Vertically centered text using bootstrap's flex utils not working in IE11

I realize this question has been asked a lot

but my question is different because I have the desired effect working on all browsers except IE11.

I'm aware of the flex auto margin bug, but my layout avoids using those so I don't believe that's the problem.

This is the layout I want to, and do achieve in modern browsers.

Working

This works in Edge, Firefox, and Chrome. But in IE11, this is the result.

Not working

Here is the HTML

<div class="container pt-5 pb-5">
  <div class="quote-container d-flex flex-column justify-content-center">
    <p class="bold-weight extra-large-heading italic text-center">
      <i class="fas fa-quote-left quotes mr-2" aria-hidden="true"></i>
      Facts are meaningless. You could use facts to prove anything that's even remotely true.&nbsp;
      <i class="fas fa-quote-right quotes ml-2" aria-hidden="true"></i>
    </p>
    <p class="text-muted text-center">– Homer Simpson</p>
  </div>
</div>

And here is my CSS although very little of it has to do with the layout. The salmon color is only there to make seeing the container easier. 

.quote-container{
    min-height:600px;
    background:salmon;
}

.quotes {
    color: 
    #FFA300;
}

/*Generic Styles*/
.extra-large-heading {
    font-size: 2rem;
}

.italic{
    font-style:italic;
}

.bold-weight {
    font-weight: 700;
}

I have created a fiddle that recreates this issue. https://jsfiddle.net/1wztmvo5/1/

If you want to see the issue in IE11, you'll have to use this embed link. https://jsfiddle.net/1wztmvo5/1/embedded/result,css,html,js

Any help would be really appreciated. I'm pulling my hair out over this one.

Upvotes: 1

Views: 71

Answers (1)

sanriot
sanriot

Reputation: 804

You have encount the bug that min-height property is ignored on Internet Explorer 11 with use Flexbox. This bug is listed GitHub's Flexbugs repository.

Flexbug #3

min-height on a flex container won't apply to its flex items

In order for flex items to size and position themselves, they need to know how big their containers are. For example, if a flex item is supposed to be vertically centered, it needs to know how tall its parent is. The same is true when flex items are told to grow to fill the remaining empty space.

In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.

This bug's one of the workaround is wrap the flex container other flex container.

.quote-container{
    min-height:600px;
    background:salmon;
}

.quotes {
    color: 
    #FFA300;
}

/*Generic Styles*/
.extra-large-heading {
    font-size: 2rem;
}

.italic{
    font-style:italic;
}

.bold-weight {
    font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-5 pb-5">
  <div class="d-flex flex-column"><!-- Add wrapper flex container -->
    <div class="quote-container d-flex flex-column justify-content-center">
      <p class="bold-weight extra-large-heading italic text-center">
        <i class="fas fa-quote-left quotes mr-2" aria-hidden="true"></i>
        Facts are meaningless. You could use facts to prove anything that's even remotely true.&nbsp;
        <i class="fas fa-quote-right quotes ml-2" aria-hidden="true"></i>
      </p>
      <p class="text-muted text-center">– Homer Simpson</p>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions