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
Vielen Dank für die Hilfe !