Буду очень благодарен, если вы мне подскажите, как можно решить проблему.
Скидываю простейший пример вёрстки, демонстрирующей проблему, без лишнего мусора - https://github.com/R45H/bug-in-ff.
Нужно, чтобы в firefox отображалось также, как и в хроме. С учётом адаптивности.
Здесь используется флексбокс и паддинг снизу в % для сохранения пропорций картинок.
Проблема заключается в том, что при указании flex-direction: column; лиса схлопывает картинки (а хром нет).
Мне подойдёт любое решение, но поведение и вид должны быть такими же, как в примере в хроме:
- пропорциональное уменьшение картинок;
- блоки с синей обводкой растягиваются на всю оставшуюся высоту;
- голубой и зелёный блоки подстраиваются по высоте друг под друга (неважно где сколько текста);
- на планшетах всё должно разворачиваться по-бутстраповски (как сейчас в примере).
Заранее спасибо за помощь.