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

[Anonymous]

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

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

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

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

))}

Вот воспроизведение на Codepen: https://codepen.io/AlllexxTh/pen/bNbKgaq?editors=1000
РЕДАКТИРОВАТЬ:
Поскольку мой код Tailwindcss, возможно, был неясным, я добавляю код со стандартным Html CSS и другим кодом:
https://codepen.io/AlllexxTh/pen/EaYRoEj

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

Demo











ADD MORE 'scroll-element's

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

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

.screen {
height: 100vh;
width: 100wh;
padding: 10px;
background-color: black;
display: flex;
flex-direction: column;
gap: 10px;
}

.header {
height: 150px;
background-color: blue;
}

.dashboard {
padding: 10px;
gap: 10px;
background-color: blue;
display: flex;
flex: 1;
}

.dash-container-1 {
width: 400px;
background-color: green;
display: flex;
flex-direction: column;
padding: 10px;
gap: 10px;
}

.box {
background-color: gray;
flex: 1;
}

.scroll-container {
display: flex;
flex-direction: column;
padding: 10px;
gap: 10px;
flex: 1;
background-color: red;
overflow-y: scroll;
}

.scroll-element {
width: 100%;
background-color: yellow;
height: 100px;
}

Спасибо за помощь!

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

function extend() {
const scroller = document.getElementsByClassName("scroll-container")[0];
scroller.innerHTML = '' +
scroller.innerHTML;
}

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

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

.screen {
height: 100vh;
width: 100vw;
padding: 10px;
background-color: black;
display: flex;
flex-direction: column;
gap: 10px;
}

.header {
height: 150px;
background-color: blue;
}

.dashboard {
padding: 10px;
gap: 10px;
background-color: blue;
display: flex;
flex: 1;
}

.dash-container-1 {
width: 400px;
background-color: green;
display: flex;
flex-direction: column;
padding: 10px;
gap: 10px;
}

.box {
background-color: gray;
flex: 1;
}

.scroll-container {
display: flex;
flex-direction: column;
padding: 10px;
gap: 10px;
flex: 1;
background-color: red;
overflow-y: scroll;
}

.scroll-element {
width: 100%;
background-color: yellow;
height: 100px;
}

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

ADD MORE 'scroll-element's

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