В этом случае футер не прилипает к низу страницы, поскольку .wrapper получает height: auto (по контенту), так как высота родителя (в данном случае это body) не задана явно.
то .wrapper расширится до высоты страницы, сработает flex-grow у .content и футер прижмется к низу.
ПС. Протестировал, вылез баг IE10-11, из-за которого значение min-height флекс-контейнера игнорируется его детьми. Лечится добавлением к обертке (здесь body):
Размышление верно при условии, что футер задумывался, как "липкий"
Текущая структура шаблона pug:
и стилей:
В этом случае футер не прилипает к низу страницы, поскольку
.wrapper
получаетheight: auto
(по контенту), так как высота родителя (в данном случае этоbody
) не задана явно.Но если установить:
то
.wrapper
расширится до высоты страницы, сработаетflex-grow
у.content
и футер прижмется к низу.ПС. Протестировал, вылез баг IE10-11, из-за которого значение
min-height
флекс-контейнера игнорируется его детьми. Лечится добавлением к обертке (здесь body):разъяснение: https://github.com/philipwalton/flexbugs#flexbug-3
И напоследок: так же решает задачу установление
height: 100%
для всех - html, body и .wrapper, без остальных плясок с бубнами.