Grids nested in Flexbox --- Eine simple Anfängerfrage

[einsiedler]

Grids nested in Flexbox --- Eine simple Anfängerfrage

Ich fange mit dem lernen mal ganz einfach an:

Ausgangspunkt ein <main> das eine flexbox ist darin nebeneinander 3 Grid-Zellen eingebunden.
So hab ich es gemacht:

@media all {
		header, nav, main, aside, footer, article, figure, figcaption, audio, video {
			display: block;
		}
		*, *:before, *:after {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		body {
			margin: 0;
			padding: 0;
			margin: 0 auto;
			width: 95%;
		}
		
		/* ------------------------- */
		/* START  MAIN cardbox */
		
		#cardbox
		{
			display: flex;
			align-items: flex-start;
			border: 3px dotted #694486;
		}
		
		#cardbox > section
		{
			padding: 0.3rem;
			background: hsl(0, 80%, 40%);
			color: white;
			height: 100%;
			flex: 1;
		}

		#cardbox
			{
				display: grid;
				grid-template-columns: repeat(3, auto);
				grid-gap: 0.3rem;				
			}
			
		#cardbox > section
		{
			display: inline-block;
		}
		
		#cardbox > section
			{
				background-color: #694486;
				color:#fff;
				padding: 10px;
				border-radius: 5px;				
			}
}

Und mein html:

<main id="cardbox" tabindex="-1">
		<section class="card1">
				Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. 
				»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, 
				fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
		</section>
		<section class="card2">
				Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. 
				»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, 
				fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. 
		</section>
		<section class="card3">
				Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. 
				»Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, 
				fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.
		</section>

So Beispiel hier: Beispielseite

Doch nun mein Problem:

Sobald Text in der section-box ist, der unter Umständen auch länger ist,
gehen die grid-Elemente über der flexbox hinaus,
ab einem Punkt wenn man das Bildschirmfenster zusammenschiebt.

WARUM ist das so, das dürfte doch eigentlich nicht so sein oder?
Was ist nun zu machen?
was fehlt mir noch???

Der einsiedelnde