Как прижать описание к низу и не потерять бэкграуд у фона?

Question

[Полина Емельянова]

Добрый день коллеги!

САБЖ: Имеется сетка из темов Все итемы ОДНОЙ высоты, как и положено на флексах. Состав
1. Блок с картинкой, заданной бекграундом и выводимой из админ части.
2. Заголовок. Может быть ЛЮБОЙ длинны, а значит и высоты.
3. Описашка.

https://codepen.io/emelyanova/pen/mMZLxJ

Итемы лежат во флекс-контейнере и резинятся во все стороны. У блока с картинкой стандартный хак с padding-top для фоновых, пропорциональных изображений.

ПРОБЛЕМА: ПРИЖАТЬ описашку к низу!!! При этом блоки должны равняться на сомого высокого соседа. Т.е. поведение ФБоксов должно сохраняться,

Попытки решения:
Абсолютом - не катит у блока есть бэкграунд. Задавать мин-высоту не выход, она не будет тянуться по размеру за соседом.
Флексбоксом - ПРОПАДАЕТ заданная высота у блока с картинкой! matgin-top: auto; - не срабатывает. Что я тут делаю не так?

ПРОШУ: помогите решить задачу! Как тут прижать "футер" и не потерять картинку! Т.е. как сделать резиновый по высоте блок, у которого описашка всегда по-низу и картинка нужного размера!

Answer 1

[chuchas]

если в .steps__item не использовать align-items: center;, а только

display: flex;
flex-direction: column;

то бэкграунд у блока с картинкой не пропадает, а блок с описанием прижимается к низу.

Comments

[Полина Емельянова]

УТОЧНЕНИЕ: Бага есть только в Лисе.
И эти свойства стоят.

[chuchas]

вроде разобралась. у сожалению, данное поведение является багом в firefox.

вам надо в элемент с классом steps__pic добавить div, которому выставить высоту при помощи padding-top.

пример html:

<div class="steps__pic" style="background-image: url(http://lorempixel.com/output/city-q-c-640-480-7.jpg)">
  <div class="steps__pic-inside"></div>
</div>

css:

.steps__pic {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: -10px;
  margin-bottom: 0;
}

.steps__pic-inside {
  padding-top: 61%;
}

в .steps__item вернуть

display: flex;
 flex-direction: column;

Answer 2

[zoozag]

.steps__item {
display: flex;
flex-direction: column;
}