While experimenting with a flexbox inside an absolute box within a div of defined height, I encountered a problem. Let me explain the issue step by step.
Here is a link to a fiddle demonstrating the problem: https://jsfiddle.net/8ub9tyub/
When hovering over the block, you can see that text appears from below but doesn't fully display.
The setup involves a main div (let's call it $main) for hover effects measuring 600x250px with overflow set to hidden. Inside this main div are two sub-divs: title and text (referred to as $title and $text), which appear one after the other in regular flow.
$title might sometimes occupy two lines, so its height is set to auto.
$text has a height of 100%, positioned relatively and with a display: flex property. Within $text is another div ($intro) absolutely positioned with top: 100% (transitions to 0 on hover) and
align-self: flex-end</code to remain at the bottom of <strong>$main</strong>.</p>
<p>The structure simplifies as follows:</p>
<pre><code><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>
In the demo, $text's height is set to 100%, whereas I expected the height to be the difference between $main and $title. Consequently, the overflow of $text causes part of the text to get cut off when hovering.
If anyone knows how to adjust $text to have the anticipated height without predicting $title's height (eliminating the use of calc() as far as I know) and refraining from JavaScript intervention, please share your insights!