How to fills my container with my cards? (Flex)

i'm new to html and i want to create cards which fills the container.

HTML:

<div class="services-container><div class="services-card"><h3>Services 1</h3><p>Services Information</p></div><div class="services-card"><h3>Services 2</h3><p>Services Information</p></div>/!-- and more services --></div>

CSS:

.services-container {    display: flex;    align-content: flex-start;}.services-card {    display: flex;    flex-direction: column;}

It turned out broken like this image:Cards broken and not filling the container

If someone can help me and provide learning resources it would be appreciated, thanks.

Cards filling the container without it overflowing out of device width