ngFor Elements in Row - css

Question

Hello currently I'm trying to display my items from ngFor in a row, but it's not working.
My Code:
<ng-container>
<div class="model" *ngFor="let model of modelService;" >
<div id="Ppicture" > {{model.modelPic}} </div>
<div id="Name" > {{model.modelName}} </div>
<div id="Age"> {{model.modelAge}} </div>
</div>
</ng-container>
CSS:
ng-container{
display: flex;
flex-direction: row;
}
.model{
padding-left: 10px;
padding-top: 10px;
border: solid 1px;
height: 150px;
width: 150px;
justify-content: center;
text-align: center;
}
I also tried to put display flex into the .model class, but flex is only putting the text in a row, not the boxes.
That's how it looks like
https://ibb.co/VLSKVcS

Answer 1

try to put width: 100% in ng-container.
ng-container{
width: 100%;
display: flex;
flex-direction: row;
}

Answer 2

Try this
<ng-container>
<div class="model_sec">
<div class="model" *ngFor="let model of modelService;" >
<div id="Ppicture" > {{model.modelPic}} </div>
<div id="Name" > {{model.modelName}} </div>
<div id="Age"> {{model.modelAge}} </div>
</div>
</div>
</ng-container>
ng-container {
display: block;
width: 100%;
}
.model {
padding-left: 10px;
padding-top: 10px;
border: solid 1px;
height: 150px;
width: 150px;
text-align: center;
}
.model_sec {
display: flex;
width: 100%
}