Флексбокс. Неправильное отображение в Firefox

[R45H]

Буду очень благодарен, если вы мне подскажите, как можно решить проблему.
Скидываю простейший пример вёрстки, демонстрирующей проблему, без лишнего мусора - https://github.com/R45H/bug-in-ff.

Нужно, чтобы в firefox отображалось также, как и в хроме. С учётом адаптивности.
Здесь используется флексбокс и паддинг снизу в % для сохранения пропорций картинок.

Проблема заключается в том, что при указании flex-direction: column; лиса схлопывает картинки (а хром нет).
Мне подойдёт любое решение, но поведение и вид должны быть такими же, как в примере в хроме:
- пропорциональное уменьшение картинок;
- блоки с синей обводкой растягиваются на всю оставшуюся высоту;
- голубой и зелёный блоки подстраиваются по высоте друг под друга (неважно где сколько текста);
- на планшетах всё должно разворачиваться по-бутстраповски (как сейчас в примере).

Заранее спасибо за помощь. 

[parnas]

1. Картинки задавайте в теге img. У вас background-image. так неправильно. Без контента высота блока картинки становиться 0. ИЛи надо задавать min-height.

2.display: flex задавайте не в родителе. в дополнительном внутренном обертке. Например,  в .container__inner е

3. padding и задавайте в пикселях.

[radioactive]

дополню

display:-moz-box;
display:-ms-box;
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
display:-moz-flex;
display:-ms-flex;
display:-webkit-flex;
display:flex;

-moz-flex-direction:column;
-ms-flex-direction:column;
-webkit-flex-direction:column;
flex-direction:column;