Как с помощью CSS показать элемент только тогда, когда родительский элемент переполнен? ⇐ CSS

[Anonymous]

Как с помощью CSS показать элемент только в том случае, если родительский контент переполнен?
(Это называется кнопкой «показать больше»).
Требования к ответу:

• Контент имеет фиксированную максимальную высоту
• дочерний контент может содержать любой контент (текст, изображения и т. д.)
• Решение имеет использовать только CSS.

Только CSS — очень строгое требование. Только CSS быстрее, не мерцает при запуске, более отзывчив и т. д.
Нерабочий код

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

.container {
max-height: 100px;
overflow: hidden;
position: relative;
margin: 1rem;
}

.big-content {
background: linear-gradient(to bottom, black, white);
height: 200px;
}

.small-content {
background: linear-gradient(to bottom, black, white);
height: 50px;
}

.overflow-message {
position: absolute;
bottom: 0px;
}

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

Overflowing (visible)



Not overflowing (not visible)

Исследование
Нет похожего вопроса поддерживается только CCS.

• Как переключить кнопку «Показать больше», если текст переполнен.
• Как создать кнопку «Показать больше» " и укажите, сколько строк текста может быть отображено изначально.
• ReactJS Как реализовать кнопку «Показать больше»?
• Кнопка Flutter Markdown «Показать больше»
• Кнопка «Показать больше» в html
  < li>Кнопка Flutter Markdown «Показать больше»

Подробнее здесь: https://stackoverflow.com/questions/792 ... verflowing