* {
    box-sizing: border-box;
}

.container {
    border: 1px firebrick solid; 
    display:block;
}

.card {
    background-color: rgba(255,255,0,0.6);
    border-radius: 20px;
    min-height: 4rem;
    margin-bottom: 1rem;
    padding:0.5rem;
}

<div class="container" style="
border: 1px firebrick solid; 
display:block;
box-sizing: border-box;
">
<div class="card" style="
box-sizing: border-box;
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
">
Hallo,</div>
<div class="card" style="
box-sizing: border-box;
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
">
das ist ein Test.</div>
<div class="card" style="
box-sizing: border-box;
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
">
Und jetzt mit einigen weiteren Worten...</div>
</div>
<div style="margin:1rem;"></div>
<div class="container" style="
border: 1px firebrick solid; 
display:block;
box-sizing: border-box;
">
<div class="card" style="
box-sizing: border-box;
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
">
Lorem ipsum dolor sit amet.</div>
<div class="card" style="
box-sizing: border-box;
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.</div>
<div class="card" style="
box-sizing: border-box;
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.</div>
</div>



------------------

    <style>
        * {
            box-sizing: border-box;
        }

        .container {
           display:block;
        }

        .card {
         background-color: rgba(255,255,0,0.6);
         border-radius: 20px;
         min-height: 4rem;
         margin-bottom: 1rem;
         padding:0.5rem;
        }
    </style>

    <div class="container">
        <div class="card">Lorem ipsum dolor sit amet.</div>
        <div class="card">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.</div>
        <div class="card">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.</div>
    </div>

    <div class="container">
        <div class="card">Hallo,</div>
        <div class="card">das ist ein Test.</div>
        <div class="card">Und jetzt mit vielen Worten...</div>
    </div>


---

02

        .container {
           border: 1px blue solid; 
           display:flex;
           gap:1rem;
           min-height: 15rem;
        }

---

03

        .container {
           border: 1px blue solid; 
           display:flex;
           gap:1rem;
           min-height: 15rem;
           width:50%;

        }

        .container > * {
            
            /* Defaults */
            flex-shrink:1;
            flex-grow:0;
            flex-basis:auto;
            
        }

Flexboxen bewegen sich zwischen width: min-content und width: max-content

shrink: 
* 1: passt sich an, bis width: min-content erreicht ist, dann overflow

grow: 
* 0: nutzt den gesamten horizontalen Raum, wenn das Fenster größer wird.

basis: 
* auto: nimmt allen vertikalen Raum




