Сделать прокрутку внутреннего div перед внешним div ⇐ CSS

[Гость]

Я работаю над инфраструктурой графического пользовательского интерфейса и пытаюсь реализовать свой виджет ScrollArea. Проблема в том, что когда два элемента ScrollArea вложены, прокрутку начинает внешний, что делает внутренний бесполезным.

Например, предположим, что пользователь создает следующий графический интерфейс:

gui = ScrollArea( фон = 'зеленый', Horizontal_padding = '3em', ширина = '15em', высота = '10em', дочерний = Область Прокрутки( фон = 'желтый', Horizontal_padding = '3em', дочерний = Прямоугольник( фон = 'красный' высота = '15em' ) ) ) В результате получится следующий HTML/CSS:

.scroll-area { переполнение: авто; положение: относительное; } .scroll-область > * { минимальная высота: 100%; минимальная ширина: 100%; } #scroll-area-1 { ширина: 15ем; высота: 10ем; фон: зеленый; отступ: 0 3em; размер коробки: граница-коробка; } #scroll-area-2 { фон: желтый; отступ: 0 3em; размер коробки: граница-коробка; } #rectangle-1 { фон: красный; высота: 15ем;

Как видите, полоса прокрутки появляется рядом с внешней (зеленой) ScrollArea, а не с внутренней (желтой). Как я могу это исправить? Предпочтительно с использованием чистого CSS, но если необходим JS, тоже подойдет.

Примечания:
[*]Дочерний элемент ScrollArea никогда не должен быть меньше самого ScrollArea. Вот почему у меня есть min-width: 100% и min-height: 100%.