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

[Боков Глеб]

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

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

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

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

На StackOverflow уже несколько недель никто не может найти решение (оно и понятно: в разметке-то ошибок нет, это просто баг IE, но с ним надо что-то делать, потому что пользователи IE, увы, ещё превышают критическую отметку 10%). Вот только что удалось выяснить: если контейнеру .FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper для основного содержимого (под header) задать min-height вместо height, то отображение станет нормальным. К сожалению, такое решение не годится потому, что исчезнет "прилипание" header-а кверху. Можно, конечно, прилепить его и другими способами, но хотелось бы избежать задания его абсолютной высоты, так как это противоречит концепции адаптивной вёрстки.

[npofopr]

Да тут скорее IE делает всё правильно, а остальные просто подстраиваются. 

100vh это растянуть же на всю высоту вьюпорта. Что IE и делает. А остальные браузеры тянут дальше, хотя если смотреть через консоль, то высота пишется вьюпора.

Надо указывать так min-height: 100vh; так правильнее будет.

IE тут как раз делает всё так, как написано. А остальные отсебятину несут. ИМХО.

Может вам поможет https://codepen.io/anthonyLukes/pen/DLBeE

[npofopr]

Жуть какая) 
До сих пор понять не могу, как у вас шапка залеплена, это делается банальным position:fixed;

А min-height:100% это норма. 

На caniuse не проверяли ваши изыски с проблемами совместимости?

За километровые классы отдельное спасибо))

[Боков Глеб]

Цитата

До сих пор понять не могу, как у вас шапка залеплена

Залеплена она очень просто: она является первым элементов flex-контейнера с ориентацией column. Контейнер при этом имеет высоту 100vh, а второй его дочерний элемент занимает между между шапкой и низом экрана. Такой подход позволяет не указывать абсолютную высоту шапки.

Цитата

это делается банальным position:fixed;

А можно залепить шапку с помощью fixed без указания её абсолютной высоты? Если нет, то решение с fixed не подходит.

Цитата

На caniuse не проверяли ваши изыски с проблемами совместимости?

Так причина же не ясна. Отсюда непонятно, как искать.

Цитата

За километровые классы отдельное спасибо))

Между краткостью и однозначностью я выбираю второе (и то и другое возможно не всегда).

 

Edited February 13, 2018 by Боков Глеб

[Боков Глеб]

Благодарю Вас за ответ! У Вас получилось решить задачу. Ещё пока не до конца понял, за счёт чего именно, но применю это к своему реальному проекту.