Адаптивный Резиновый Кроссбраузерный CSS дизайн на FLEX. Почему Chrome отображает не правильно?

Question

[deSoul]

Добрый день! Не могу разобраться с проблемой.
Я создал простую адаптивную верстку. Смысл ее в том, чтобы внутри основного блока с контентом, снизу всегда был "прибит" footer, независимо от заполненности блока контента.
Я реализовал с помощью технологии flex, и, в случае, если блок контента пуст, footer отображается корректно в Firefox, IE. Но при открытии через chrome, он "проваливается" ниже (не прилипает к нижнему краю окна браузера), примерно на высоту блока Header. Никак не могу найти причину, пожалуйста подскажите что не так с Chrome.
p.s. Пожалуйста не надо никаких Абсолютных позиционирований, я от них ухожу в данной реализации.
p.p.s. Пример кода на jsfiddle: https://jsfiddle.net/xma80x2r/1/
p.p.p.s. Скриншоты из

Firefox:

IE:

Chrome:

Answer 1

[dom1n1k]

Вообще всё неправильно сверстано. Странно скорее, что оно работает нормально в FF, чем то, что оно глючит в Chrome. По мне, оно не должно работать нигде.

Почему все блоки .flexColumnBlock имеют height: 100%? Высота там нужна только для самого внешнего контейнера. Дальше про width и height нужно забыть и пользоваться только flex-basis, flex-grow, flex-shrink.

В чем вообще смысл использования флекса при таком подходе, ну кроме того, что это модное словечко? Зачем там 2 попеременно показываемых сайдбара вместо манипуляций со свойством order? Если уже переходить на flex-верстку, то нужно принимать и использовать её идеологию, а не усердно грести против течения. Мне кажется, вы её (идеологию) пока не понимаете - почитайте теорию. Либо используйте абсолютное позиционирование, оно проще (я серьезно).

Answer 2

[Dark Hole]

Ну почему нельзя абсолютное??? Легко же с ним!

position: absolute;
bottom: 0;
left: 0;

Если без него, то только с JS

Answer 3

[Павел]

Ну уезжает футер ровно на высоту header, кажется, надо от этого "плясать"

Answer 4

[Deeepi]

наверно header calc в помощь