Как в IE 11 сделать чтобы FlexBox работал также как везде?

Question

[Роман Говоров]

Стоит Bootstrap 4.1.3 на сайте. В последнее время часто пользуюсь классами по типу d-flex flex-wrap justify-content-center flex-column и тд
Сделал сайт, и тут решил зайти посмотреть на него в IE, там где используется flex, имеются кривые элементы, justify-content-center и вовсе не срабатывает..

CHROME


IE 11

Comments

[Владислав Лысков]

верстать нормально

justify-content-center и вовсе не срабатывает..

срабатывает
https://jsfiddle.net/gfvtr340/

Answer 1

[Rustam Bainazarov]

Ну, на самом деле просто нужно правильно верстать с учетом особенностей IE11, и все будет нормально:

.advanced-search {
    flex: 0 0 100%; /* вы не поставили ширину у этого flex-элемента внутри родительского flex-контейнера */
}

.product-bg-box {
    height: 300px; /* нужно ставить и просто height тоже, не только min-height */
}

Comments

[Rustam Bainazarov]

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

[Роман Говоров]

Понял! Спасибо за ответ! В плане адаптивности все хорошо а вот в плане IE не очень

[Rustam Bainazarov]

Роман Вопроскин, я же привел вам и код, и скриншоты.

У вас там не хватает height. Свойства min-height недостаточно для IE11. И будет все работать.