Горизонтальная карта Bootstrap с телом карты, заполняющим вертикальное пространство и имеющим условную кнопку «расширите ⇐ CSS

[Anonymous]

Я пытаюсь создать горизонтальную карточку с ограниченной высотой и расширителем кнопок, чтобы убрать ограничение по высоте.
.col-4 должен содержать изображение используя object-fit:cover.
.card-body может содержать контент произвольной длины. Ее следует сочетать со ссылкой «Читать далее», чтобы увеличить высоту карточки.
Вот что у меня есть на данный момент...

Код: Выделить всё

[img]https://dummyimage.com/400x700/000/fff[/img]




Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, turpis est aliquam turpis, at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, turpis est aliquam turpis,

at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur

at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur

at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur

Read more

Вы можете видеть, что .long-content перекрывает изображение .
Установка .height на уровне .card ничего не дает — содержимое переполняется.
Изображение на left должен вписываться в любое предоставленное пространство - отсюда и мое объявление .object-fit-cover. Хотя: обратите внимание на неприятную высоту, дублированную в родительском элементе. Если бы этого можно было избежать, это тоже было бы здорово.
Кроме того, контент должен растягиваться, и в идеале ссылка «Читать дальше» не должна отображаться, если контент не переполнен.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -and-has-a