CSS: вырезание текста по размеру родительского ⇐ CSS

[Anonymous]

Проблема заключается в том, чтобы разместить как можно больше текста по вертикали в дочернем без того, чтобы дочерний вышел за пределы родительского контейнера и не зная заранее объем оставшегося места в родительском контейнере.

Контейнер имеет фиксированную высоту и два дочерних элемента. Вот пример фрагмента HTML:

Название, оно должно вырасти настолько, насколько необходимо Некоторый текст, выходящий за пределы размера контейнера. Я хочу, чтобы этот текст был обрезан многоточием, когда контейнер «заканчивается». и соответствующая таблица стилей:

.container { ширина: 15рем; цвет фона: желтый; высота: 20рем; } .заголовок { размер шрифта: 200%; размер шрифта: 600; } .текст { переполнение текста: многоточие; граница: 2 пикселя, сплошная красная; } Первый дочерний элемент (заголовок) должен адаптировать свой размер к содержащемуся в нем тексту. Другой дочерний элемент должен использовать оставшееся вертикальное пространство, но оно не должно превышать фиксированную высоту своего родителя.

Этот jsfiddle показывает, чего я пытаюсь достичь.

Мне нужно решение только с CSS, Javascript невозможен. При необходимости я могу изменить структуру HTML.

РЕДАКТИРУЙТЕ после подсказок, чтобы добавить переполнение: скрыто в контейнер:

Поскольку сделать именно то, что мне нужно, кажется невозможным, я могу жить без многоточия, поэтому решение overflow: Hidden подойдет мне. Однако я пробовал это, но, похоже, это не работает:

https://jsfiddle.net/lucrus/8ux1h309/5/