Estou tentando mover uma div com uma altura de mudança dinâmica fora da div pai e voltar.

O problema é a altura dinamicamente, caso contrário eu poderia facilmente definir a altura negativa como o valor inferior. Por enquanto, acabei de definir um grande número negativo de pixels como valor inferior, mas não é muito bom e não resolve o problema corretamente. (logicamente isso acontece para números pequenos:violino) Espero que o exemplo abaixo esclareça o que tento fazer.

Eu estava pensando em usartransforma em vez disso, mas também não encontrei uma solução.

Claro que eu poderia fazer isso com JavaScript, mas como todosEu prefiro uma solução CSS pura :)

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