переполнение: авто не работает, потому что внутренний div должен оставаться в нижней части внешнего div

Question

Я пробовал некоторые из предложенных решений, но они не работают. У меня есть два div, и содержимое внутреннего div меняется через javascript. это должно остаться в нижней части внешнего деления. вот мои первые css коды:

#parent {
    width : 202px;
    height : 100px;
    text-align: right;
    overflow: auto; 
    direction : rtl; <!-- to set scroll bar at the left -->
    position: absolute; <!-- to set inner div at the bottom-->
}
#result {
    direction : ltr; <!-- to set inner divs content at the right-->
    position: absolute;  <!-- to set inner div at the bottom-->
    bottom: 2px;  <!-- to set inner div at the bottom-->
}

первое решение, которое я попробовал, помещало еще один div между родителем и результатом div после переполнения: auto не работает с position: absolute. Тем не менее, полоса прокрутки не отображается при переполнении.

#parent {
    width : 202px;
    height : 100px;
    text-align: right;
    overflow: auto; 
    direction : rtl; <!-- to set scroll bar at the left -->
    position: relative;
}
innerParent {
    position: relative; <!-- to set inner div at the bottom-->
}
#result {
    direction : ltr; <!-- to set inner divs content at the right-->
    position: absolute;  <!-- to set inner div at the bottom-->
    bottom: 2px;  <!-- to set inner div at the bottom-->
}

другим способом было использование position: flex вместо position: absolute в первую очередь. переполнение: авто работает, но содержимое остается наверху.

#parent {
    width : 202px;
    height : 100px;
    text-align: right;
    direction : rtl; <!-- to set scroll bar at the left -->
    overflow: auto; 
    Display: flex; <!-- to set inner div at the bottom-->
    Flex-direction: column; <!-- to set inner div at the bottom-->
}
#result {
    direction : ltr; <!-- to set inner divs content at the right-->
    margin-top: auto; <!-- to set inner div at the bottom-->
}