Баг IE: контейнер заканчивается раньше дочернего центровщика

#html #css #internet_explorer

                    
Очень трудно было выбрать тему для данного вопроса: "У меня не так отображается,
помогите!" - это не тема, но дело в том, что в данном вопросе рассматривается очередной
баг Internet Explorer (то есть в других браузерах всё отображается нормально), причину
которого никак не удаётся выяснить.

К задаче. У нас типичный блок .Wrapper, который имеет ширину 100% от окна, и центровщик
(margin: 0 auto;) с указанными min-width и max-width:



В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик
с содержимым перекрывает следующую такую же компоновку ниже:



Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень
трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML
для данного примера, но CSS тоже самое было сделать очень трудно. 

Если Вы запустите пример в IE (ещё раз повторюсь, что в других браузерах всё нормально),
то увидите следующее:



Расскажу о том, что обнаружил сам. Сама по себе верхняя компоновка Wrapper-Centerer-Содержимое
отображается корректно (её содержимое - таблица). Баг появляется при появлении нижней
комбинации. Вообще там есть внутренний контейнер с зафлоченными элементами, но всё
равно неясно, в чём проблема. Естественно, везде где надо, есть overflow: hidden;.
    

Ответы

Ответ 1

К section добавьте flex: 1 0 auto:

https://jsfiddle.net/Kniha/mLh63fao/3/

В примере добавлено через section[class$='-RootWrapper'].