Problem mit scrollbarem Div, das aufwändig ist ⇐ CSS

[Guest]

Ich erstelle eine ganzseitige Website/Dashboard mit tailwindcss und habe ein Problem mit dem Overflow-Scroll. Anstatt mein Div scrollbar zu machen, wird das Div erweitert.
Mein Div mit 2 Elementen darin
Mein Div mit 6 Elementen darin
Der gesamte grüne Entwickler sollte die gleiche Größe behalten.
Ich habe viele Techniken ausprobiert, aber ich denke, dass das Problem darin liegt, wie Flexbox gehandhabt wird, und ich verstehe noch nicht alles .
Ich vermute, dass die Höhe auf eingestellt wird 100 % behebt den Überlauf nicht.
Wenn ja, wie kann ich das ändern, ohne die Höhe selbst festzulegen (ich möchte es nach Möglichkeit nicht hart codieren)?

Code: Select all

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

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

))}

Hier ist eine Reproduktion auf Codepen: https://codepen.io/AlllexxTh/pen/bNbKgaq?editors=1000
BEARBEITEN:
Da mein tailwindcss-Code möglicherweise unklar war, füge ich Code mit Standard-HTML-CSS und einem anderen Codepen hinzu:
https://codepen.io/AlllexxTh/pen/EaYRoEj

Code: Select all

Demo











ADD MORE 'scroll-element's

Code: Select all

* {
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;
}

Danke für die Hilfe!

Code: Select all

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

Code: Select all

* {
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;
}

Code: Select all

ADD MORE 'scroll-element's