расположение угловых компонентов снизу с использованием CSS / HTML

Question

У меня есть следующая схема отображения нескольких угловых компонентов:

    <div class="my-parent">
      <my-child-1></my-child-1>
      <div class="style-2">
        <my-child-2></my-child-2>
      </div>
      <div class="style-3">
        <my-child-3 style="bottom: 10px;position: absolute;"></my-child-3>
      </div>
    </div>

    .style-2 {
      overflow-y: auto;
      height: 368px;
    }

    .style-3 {
      overflow-y: auto;
      height: 301px;
    }

Моя цель состоит в том, чтобы my-child-3 находился внизу, а my-child-2 - справа вверху.my-child-2 и my-child-1 взаимозаменяемы в зависимости от некоторых условий.Кроме того, я хочу, чтобы высота my-child-1 составляла не более 301 пикселя, а полоса прокрутки должна превышать это содержимое.

Проблема, с которой я сталкиваюсь, заключается в том, что если содержимое my-child-3 меньше 301pxтогда мой ребенок-2 не сидит прямо наверху, и между ними есть разрыв.Я понимаю, что, поскольку я установил высоту родительского div для my-child-3 на уровне 301 пикселя, этот большой объем (фактическая высота содержимого 301) остается пустым, и только после этого начинается родительский div для my-child-2.

Но я не уверен, как ее решить.