Move div with dynamic height out of its parent container

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

Answer 1

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.