Вертикально центрированный текст с использованием bootstrap flex утилит, не работающих в IE11

Question

Я понимаю, что этот вопрос задавали много

• Пример 1
• Пример 2
• Пример 3

но мой вопрос другой, потому что у меня есть желаемый эффект, работающий на всех браузерах, кроме IE11.

Мне известно о flex ошибка автоматического маржинального , но мой макет избегает их использования, поэтому я не думаю, что это проблема.

Это макет, который я хочу и добиваюсь в современных браузерах.

Это работает в Edge, Firefox и Chrome. Но в IE11 это результат.

Вот этот 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>

А вот мой CSS хотя очень мало делать с макетом. Цвет лосося только для того, чтобы было легче видеть контейнер.

.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;
}

Я создал скрипку, воссоздающую эту проблему. https://jsfiddle.net/1wztmvo5/1/

Если вы хотите увидеть проблему в IE11, вам придется использовать эту ссылку для встраивания. https://jsfiddle.net/1wztmvo5/1/embedded/result, css, html, js

Любая помощь будет принята с благодарностью. Я тяну свои волосы над этим.

Answer 1

У вас есть ошибка, что свойство min-height игнорируется в Inte rnet Explorer 11 с использованием Flexbox. Эта ошибка в списке GitHub's Flexbugs репозиторий .

Flexbug # 3

min-height в контейнере flex не будет применяться к его элементам flex

Для того, чтобы гибкие элементы имели размеры и расположение, им нужно знать, насколько велики их контейнеры. Например, если предполагается, что гибкий элемент центрируется по вертикали, ему необходимо знать, каков его родитель. То же самое верно, когда flex-элементам говорят, что они растут, чтобы заполнить оставшееся пустое пространство.

В IE 10-11, min-height объявления для flex-контейнеров определяют размер самих контейнеров, но их flex-элемент дети, кажется, не знают размер своих родителей. Они действуют так, как если бы высота не была установлена ​​вообще.

Один из обходных путей для этой ошибки - это оборачивание гибкого контейнера в другой гибкий контейнер.

• jsFiddle для проверка результатов в IE11

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