Как при большем количестве контента уменьшать картинку?

Question

[Jack]

Здравствуйте!
Есть карточка с фиксированными шириной и высотой. Вверху текст, по центру картинка, внизу текст. Ссылка ниже. Как при добавлении текста снизу уменьшать картинку, чтоб она не выталкивала нижний контент?
https://codepen.io/moskva/pen/gOXrVmB?editors=1100

Comments

[Ankhena]

Использовать гриды, оставляя для картинки 1fr. Тексту min-content.

Зачем вам для

.card {
  display: flex;
  flex-direction: column;

Когда блочные элементы сами друг под другом встают - вот это загадка.
Вы же не используете возможности флектов.

[Jack]

Ankhena, к сожалению я не учил гриды, сразу начал с флексов. Флекс задал, так как проще всего выровнять по центру и раскидать сверху вниз

[Ankhena]

Jack,

к сожалению я не учил гриды

Значит, как раз пришла пора

[Jack]

Ankhena, а с флексами никак такого не добиться?

[Ankhena]

Jack, по ширине получилось бы, по высоте ничего не мешает выпадать.

[Spaceoddity]

Jack, вот это допишите

.card-body {
  flex: 0 1 auto;
  overflow:hidden;
}
.card-body img{
  height:100%;
}

[ambisinister One]

Ankhena, простите за много вопросов...
А почему только флекс? exp с минусом тоже отлично функционирует для свёртывания.

[Ankhena]

ambisinister,

А почему только флекс?

Плохо поняла ваш вопрос и откуда взялось про "только флекс"...

Я вообще про гриды говорила и решение этой задачи с их помощью в 2 строчки.
Причем вторая из них это height 100% для img.

[Ankhena]

Jack, да, кстати, про идею с overflow забыла

[Jack]

Spaceoddity, Благодарю! )

Answer 1

[Tatsiana Vasiukovich]

Добрый день

1) Добавить для .card-header и .card-footer "flex: 0 1 auto;"
2) содержимое .card-footer обернуть в доп. контейнер и уже ему назначать display:flex, а не самому .card-footer (см codepan)