Мой flexbox внутри абсолютного блока находится внутри элемента div с определенной высотой (JSFiddle). Когда я навожу курсор на блок, текст появляется снизу, но не отображается полностью. Div main для части при наведении имеет размер 600 x 250 пикселей с переполнением: скрыто и в нем заголовок и текст располагаются друг за другом (обычный поток).
иногда может занимать две строки, поэтому для его высоты установлено значение auto.
имеет высоту 100%, позиционируется относительно и настроен на отображение: flex. Внутри находится div intro, расположенный в абсолютном положении с top: 100% (который переключается на 0 при наведении курсора) и align-self: flex-end, чтобы он оставался внизу основного, чтобы сохранить текст из заголовка:
Код: Выделить всё
I'm a title!
Just a bunch of long paragraphs of text
установлена на 100 %, но я ожидал, что высота будет равна высоте main минус title. Это всего лишь высота main, которая приводит к переполнению блока text, и когда я навожу курсор на блок, чтобы появился текст, блокируется нижняя часть за пределами main и обрезается текст.
Как мне сделать так, чтобы текст имел ожидаемую высоту, поскольку я не могу предсказать высоту заголовка (насколько я знаю, не могу использовать Calc()) и без JavaScript?
Подробнее здесь:
https://stackoverflow.com/questions/273 ... ning-and-1
Мобильная версия