Move div with dynamic height out of its parent container - html

Question

I'm trying to move a div with a dynamically changing height out of it's parent div and back in.
The problem is the dynamically height, otherwise I could easily set the negative height as the bottom value.
For now I just set a large negative number of pixels as the bottom value, but it isn't very nice and does not solve the problem properly. (logically this happens for small numbers: fiddle)
Hopefully the example below clarifies what I try to do.
I was thinking about using transforms instead, but i did not find a solution as well.
Of course I could do this with JavaScript, but as everyone I prefer a pure CSS solution :)
#outer {
position: relative;
width: 400px;
height: 400px;
background: black;
overflow: hidden;
}
#inner {
position: absolute;
bottom: -500px;
/*
It's working but ugly and not perfect.
The value I need would be the height of the inner div, but it is dynamic
*/
width: 100%;
background: red;
transition: 0.4s;
}
#outer:hover #inner {
transition: 0.4s;
bottom: 0;
}
<div id="outer">
<div id="inner">
Some expanding text here
</div>
</div>

Answer 1

You could use CSS transform:translateY(100%) property, so the height is calculated based on the element itself. Then reset the value to 0 on hover.
Inspect the element, you'll be able to see exact the height and position of it.
Also take a look of support tables for transform, and prefix it if necessary.
Updated JsFiddle
.outer {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background: grey;
overflow: hidden;
}
.inner {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: aqua;
transition: 0.4s;
transform: translateY(100%);
}
.outer:hover .inner {
bottom: 0;
transform: translateY(0);
}
<div class="outer">
<div class="inner">Some expanding text here..</div>
</div>

Answer 2

If I understand your issue, you can set a max-height for its normal and :hover state and transition it. However, you must set it to a max-height that you know will always be tall enough (which may lead to random speeds depending on how much content there is).
So something like: JS Fiddle
.outer {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
background: black;
overflow: hidden;
}
.inner {
position: absolute;
bottom: 0px;
width: 100%;
background: red;
transition: 0.4s;
max-height: 0;
overflow: hidden;
}
.outer:hover .inner {
transition: 0.4s;
bottom: 0;
max-height: 40px;
}
Otherwise, I would recommend a JS solution.