Как с помощью 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)

Исследования

[*]Как переключить кнопку «Показать больше», если текст переполнен
[*]Как создать кнопку «Показать больше» и указать, сколько строк текста может быть первоначально показано
[*]ReactJS Как реализовать кнопку «Показать больше»?
[*]Flutter Кнопка «Показать больше» в Markdown
[*]Кнопка «Показать больше» в html
[*]Кнопка Flutter Markdown «Показать больше»


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