Очень трудно было выбрать тему для данного вопроса: "У меня не так отображается, помогите!" - это не тема, но дело в том, что в данном вопросе рассматривается очередной баг Internet Explorer (то есть в других браузерах всё отображается нормально), причину которого никак не удаётся выяснить.
К задаче. У нас типичный блок .Wrapper, который имеет ширину 100% от окна, и центровщик (margin: 0 auto;) с указанными min-width и max-width
В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик с содержимым перекрывает следующую такую же компоновку ниже:
Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML для данного примера, но CSS тоже самое было сделать очень трудно.
Если Вы запустите пример в IE (ещё раз повторюсь, что в других браузерах всё нормально), то увидите следующее:
Расскажу о том, что обнаружил сам. Сама по себе верхняя компоновка Wrapper-Centerer-Содержимое отображается корректно (её содержимое - таблица). Баг появляется при появлении нижней комбинации. Вообще там есть внутренний контейнер с зафлоченными элементами, но всё равно неясно, в чём проблема. Естественно, везде где надо, есть overflow: hidden;
Ответ
К section добавьте flex: 1 0 auto
https://jsfiddle.net/Kniha/mLh63fao/3/
В примере добавлено через section[class$='-RootWrapper']
Комментариев нет:
Отправить комментарий