Как разрешить элементу с абсолютным позиционированием переполнять карту с помощью переполнения: скрыто, сохраняя при это ⇐ CSS

[Anonymous]

Я работаю над макетом, в котором у меня есть вертикальный гибкий контейнер высотой экрана, содержащий динамическое количество карточек. Каждая карточка должна занимать всю ширину контейнера и иметь изображение, которое должно сжиматься, если вертикальный родительский контейнер переполняется в направлении Y. Для этого я использую overflow: скрытое как в контейнере, так и на карте.

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container {
display: flex;
height: 100dvh;
overflow-y: hidden;

resize: vertical; /* For example purpose */
}

.sidebar {
position: relative;

display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.5rem;

height: 100%;
width: fit-content;
max-width: 9rem;
padding: 0.5rem;

border: 1px solid black;

overflow-y: hidden;
z-index: 0;
}

.card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
z-index: 0;
border: 1px solid black;
padding: 0.25rem;
}

.card .image-container {
display: flex;
flex-shrink: 1;
width: 100%;
overflow: hidden;
}

.card .image-container img {
width: 100%;
object-fit: contain;
}

.card p {
flex: 0 0 auto;
}

.card .message {
position: absolute;
bottom: 25%;
left: 90%;
padding: 0.25rem 0.5rem;
border-radius: 20%;
background-color: red;
z-index: 50;
}

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

[img]https://picsum.photos/200[/img]

Some Text

Hello

Проблема возникает, когда я пытаюсь добавить абсолютно позиционированный элемент div (< элементstrong>.message) внутри каждой карточки. Этот элемент необходимо частично расположить за пределами карточки, но он скрывается из-за переполнения свойства скрытого свойства карточки.
Я не могу придумать, как решить эту проблему. это конкретное требование.

Подробнее здесь: https://stackoverflow.com/questions/793 ... flow-hidde