Я пытаюсь переместить div с динамически изменяющейся высотой из родительского div и обратно.

Проблема заключается в динамической высоте, иначе я мог бы легко установить отрицательную высоту в качестве нижнего значения. Сейчас я просто установил большое отрицательное количество пикселей в качестве нижнего значения, но это не очень хорошо и не решает проблему должным образом. (логически это происходит для небольших чисел:играть на скрипкеНадеюсь, приведенный ниже пример проясняет, что я пытаюсь сделать.

Я думал об использованиипрообразы вместо этого, но я также не нашел решения.

Конечно, я мог бы сделать это с помощью JavaScript, но, как и всеЯ предпочитаю чистое решение CSS :)

#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>