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

[Anonymous]

Используя CSS, я хочу отображать элемент только в том случае, если родительский контент переполнен.
Требования к ответу:

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

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

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

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

.content1 {
background: linear-gradient(to bottom, black, white);
width: 100px;
height: 200px;
}

.content2 {
background: linear-gradient(to bottom, black, white);
width: 100px;
height: 50px;
}

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

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

Overflowing



Overflowing (show not show, as the content is not overflowing)

Исследования
Я искал на StackOverflow другие ответы. Подобные вопросы задавались во многих формах, но каждый вопрос, который я могу найти, разрешает/поощряет использование JavaScript или предназначен только для текста и т. д. Этот вопрос отличается от других, поскольку он касается только CSS. CSS — это совершенно другой язык (встроенный или нет).

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

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