My flexbox inside an absolute box is inside a defined height div (JSFiddle). When I hover the block, text appears from below but doesn't show fully. Div main for the hover part is 600 x 250px with overflow: hidden and in it divs title and text after one another (regular flow).
title can sometimes take up two lines, so its height is set to auto.text is set to 100% height, positioned relative, and set to display: flex. Inside that is div intro, positioned absolute with top: 100% (which switches to 0 when hovered) and align-self: flex-end to keep it at the bottom of main to keep text from the title:
<div class="main"><div class="title">I'm a title!</div><div class="text"><div class="intro"><p>Just a bunch of long paragraphs of text</p></div></div></div>text's height is set to 100% but I expected the height to be mainminustitle's height. It is just main's height which makes the text block overflow and when I hover the block to make the text appear, locks the bottom outside main and cuts off the text.
How can I make text have the expected height, as I can't predict title's height (can't use calc() as for as I know) and without JavaScript?