*ngFor breaks css overflow - html

Question

I made a list to test the overflow of a div. The problem is, the overflow dont works correct:
Instead of using the overflow scroll, it goes invisible through the div?
This is my html:
<div class="modelSamples">
<div id="samplesTitle">
SAMPLES
</div>
<div class="sampleList">
<div id="samples" *ngFor="let tape of sampeList">
<div id="sampleName"> {{tape.name}} </div>
<div id="samplePlay">
<mat-icon> play_circle </mat-icon>
</div>
</div>
</div>
</div>
</div>
CSS:
.modelSamples{
overflow-y: auto;
margin-top: 10px;
margin-left: 10px;
width: 30%;
height: 60%;
background-color: rgb(191 126 235 / 29%);
z-index: 1;
border-radius: 30px;
}
#samplesTitle{
display: flex;
font-family: Oswald;
width: 100%;
justify-content: center;
margin-top: 20px;
color: white;
font-size: 2rem;
padding-bottom: 15px;
}
#samples{
display: flex;
flex-direction: row;
font-family: Oswald;
color: white;
font-size: 20px;
margin-left: 20px;
justify-content: space-between;
}
#sampleName, #samplePlay{
padding-bottom: 10px;
}
#samplePlay{
padding-right: 30px;
}
I also tried it with using max-height for .sampleList but that also dont work