Задать вопрос
@GreenMan1899

Кто-нибудь сталкивался с таким багом на IE 11?

К сожалению пример не могу показать, тк ошибка на большом закрытом проекте.
Но суть проблема такая:
Внутри флекс-контейнера дочернему элементу заданы стили:
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.flex-child {
height: 0;
flex-grow: 1;
overflow: auto;
}

Идея состоит в том, чтобы flex-child был всегда по размеру родителя, но при этом не выходил за его границы, а имел свой скролл, если например появится еще один дочерний компонент рядом с ним.

Ситуация такая как тут, только мне надо для вертикального случая.

И проблема в том, что изначально все работает даже на IE. Но при ререндере почему-то на IE flex-grow: 1 не срабатывает, и flex-child остается с нулевой высотой, т.е схлопывается.

Я не прошу сейчас смотреть на конкретно мой случай. А просто хотел бы узнать, есть ли какой-то такой известный баг у
IE со отваливанием стилей после ререндера

Вот наглядно:
1) Все нормально на ИЕ
5f7ef71862f7d670066346.png

2) Случается ререндер и таблица схлопывается. При этом она есть в ДОМ
5f7ef74700f58842591241.png

И если повключать/выключать стили, то она появляется.
  • Вопрос задан
  • 108 просмотров
Подписаться 1 Сложный 2 комментария
Решения вопроса 1
@GreenMan1899 Автор вопроса
В общем решил проблему одной строкой.
ИЕ как-то тупо реагировал не на эти стили, а на стили стороннего компонента выше по иерахии ДОМа.
Особенность рендера, что данные загружаются после моунтинга.
Видимо ИЕ принимал высоту контента без данных и не менял их после их подгружения.
Заменил у того верхнего родителя height: 100% на flex-grow: 1 и все норм стало
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Я бы вообще не рискнул использовать IE и React вместе. Убедите своих хотя бы на Edge перейти.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
Love.ru Пермь
от 100 000 ₽
DigitalHR Ереван
от 120 000 до 180 000 ₽