Проблема с прокручиваемым div, который расходуется ⇐ CSS

[Anonymous]

Я создаю полностраничный веб-сайт/панель управления с помощью Tailwindcss, и у меня возникла проблема с прокруткой при переполнении. вместо того, чтобы сделать мой div прокручиваемым, он расширяет его.
Мой div с 2 элементами внутри
Мой div с 6 элементами внутри
Вся зеленая конструкция должна оставаться того же размера.
Я пробовал много методов, но думаю, что проблема связана с тем, как обрабатывается флексбокс, и я еще не все понял .
Я предполагаю, что установка высоты 100% не исправляет переполнение.
Если да, то как я могу изменить это, не фиксируя высоту самостоятельно (я не хочу жестко кодировать это, если это возможно)?

Код: Выделить всё

{[...Array(2)].map((_, index) => (

{/* ...content... */}

))}

Вот репродукция на codepen: https://codepen.io/AlllexxTh/pen/bNbKgaq?editors=1000
Спасибо за помощь !

Подробнее здесь: https://stackoverflow.com/questions/793 ... -expending