@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

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

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

Похожие вопросы