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

[Anonymous]

У меня есть сетка CSS с двумя столбцами: один содержит текст, а другой — изображение. Проблема в том, что высота сетки определяется изображением, которое больше текста. Я хочу, чтобы высота сетки соответствовала высоте текста.

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

.grid {
display: grid;
grid-template-columns: 1fr 1fr;

gap: 1em;
}

.image-container img {
max-height: 100%;
width: 100%;
height: auto;
}

.text {
background: lightblue;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet purus ac nunc.

[img]https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg[/img]

Я мог бы решить эту проблему, добавив к изображению абсолютную позицию, чтобы удаляется из потока контента. Но я думаю, что есть что-то, что система компоновки сетки предлагает сделать это изначально. Есть?
Вот решение с абсолютной позицией:

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

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
}

.image-container {
position: relative;
}

.image-container img {
position: absolute;
max-height: 100%;
width: 100%;
height: auto;
object-fit: cover;
}

.text {
background: lightblue;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet purus ac nunc.

[img]https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/793 ... not-an-ove