Как растянуть часть карточки по контенту?

Question

[It]

Есть три карточки в ряд, внутри обычный контент, раскладка через flex-direction: column
Собственно в части описания разный размер контента, и как следствие прыгает постоянно положение кнопок под контентом. Как правильно задать резиновый размер этому описанию, чтобы кнопки всегда были прижаты в нижней части карточки?
У карточки не указана фиксированная высота.


Демо - https://codepen.io/Highlander/pen/zYZgQKX

Answer 1

[Ankhena]

Задать margin-top: auto для кнопок

Comments

[It]

не работает

[It]

у карточек не задана фиксированная высота

[Ankhena]

It, флекс или грид сам растянет их на одинаковую высоту.

[It]

Ankhena, не растягивает ничего

[Ankhena]

It, продолжать угадывать или песочницу сотворите?

[Ankhena]

It, конечно, не работало, если вы item__content не растянули на всю высоту карточки.
Вот, держите, https://jsfiddle.net/8e7p04aL/

Но, вообще, item__content это лишняя обертка, если там нет никаких редкостных фокусов с фоном.

[It]

Семён Семёныч, точно, спасибо!

[It]

Ankhena, обертка сделана для удобства позиционирования контентной части, чтобы спокойно один раз задать отступы и всё. Ну и потом, чтобы спокойно анимацию добавлять, связанную с размерами верхней и нижней части карточек.

[Ankhena]

It,

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

Если оправдана, то тогда ок :)

Answer 2

[Vayni]

Разрешить элементу с текстом увеличиваться, задав flex: 1 1 auto; Тогда он прижмёт кнопку к низу.

Comments

[It]

не работает, демо - https://codepen.io/Highlander/pen/zYZgQKX