Как ограничить динамическую высоту контейнера гибкого роста с изображением, которое растягивается внутри макета сетки CS ⇐ CSS

[Anonymous]

Проблема в том, что .bottom содержит изображение в сетке CSS. Изображение увеличивается, заполняя столбец сетки, и растягивается .bottom за пределы заданной высоты. Такое поведение происходит, несмотря на то, что я попытался установить max-height: 100% для изображения и его контейнера.

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

Title

3.
Dummy text



[img]images/image3.jpg[/img]


recommendation

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

.column1 {
display: flex;
flex-direction: column;
font-size: 3rem;
width: 100%;

.bottom {
display: grid;
grid-template-columns: 2fr 1fr;
align-items: start;
gap: 1rem;
flex-grow: 1;
width: 100%;

.process-image3 {
max-height: 100%;
max-width: 100%;
object-fit: contain;
height: auto;
flex-grow: 1;
}
}
}

Когда я правильно комментирую контейнер .bottom, он занимает только оставшееся доступное пространство внутри .column1. Это показывает, что .bottom и .column1 работают правильно без изображения.

Подробнее здесь: https://stackoverflow.com/questions/791 ... -that-stre