[voraa]

С CSS я не на ты.
Может, кто поможет.
Задачка на первый взгляд простая.

<style>
.extdiv {
    width: 20vw;
    heigth: 60vh;
}
.intdiv1 {
    width:100%;
}
.intdiv2 {
    width:100%;
    overflow-y: auto;
}
</style>

<div class="extdiv">
    <div class="intdiv1">
       Немного бла-бла-бла
    </div>

    <div class="intdiv2">
       Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
      Довольно много бла-бла-бла
    </div>
</div>

Див extdiv имеет вполне определенные, но не постоянные размеры (20vw 60vh)
Поэтому могут непредсказуемо меняться. К тому же эти 20 и 60 тоже могут меняться в зависимости от
media в CSS
Высота intdiv1 определяется содержимом. Может меняться, но заведомо небольшая (<40%)
Необходимо, что бы intdiv2 начинался сразу за intdiv1 и заканчивался в конце extdiv.
Нужно с помощью CSS (С JS замотаешься ловить в какой момент меняется содержимое intdiv1 и его высота) Позиционирование - любое, флексы, гриды....