CSS - Hauteur d'une div selon son contenu

Bonsoir

J'ai créé une page dans laquelle s'affichent des cards dans lesquels des membres sont listés en dessous du nom du projet auquel ils participent.

Mon soucis c'est que, lorsqu'on ajoute un sixième membre, son prénom sort de sa card et je ne sais pas comment faire pour que toutes les cards s'étendent lorsqu'un membre est ajouté.

Voici mes codes :

HTML :

<mat-toolbar class="bg-dark-blue">
    <span>Répartition des équipes</span>
</mat-toolbar>


<div class="center">
    <div class="property-card" *ngFor="let projet of equipe_liste | paginate: { itemsPerPage: count, currentPage: p }">

        <div class="property-image-title">
            <h5>{{projet.nom}}</h5>
        </div>

        <div class="property-description">
            <p style="font-size: larger;" *ngFor="let equipe of projet.equipe">{{equipe.prenom}}</p>
        </div>
    </div>
</div>
<div class="text-right">
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>

Le CSS :

h5
{
    margin:0px;
    font-size:1.4em;
    font-weight:700;
}

.center
{
    height:100vh;
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.property-card:hover {
    transform: scale(1.05);
    transition: 0.5s all ease 0s;
}

.property-card
{
    height:18em;
    width:14em;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    position:relative;
    background-color: #205081;
    border-radius:16px;
    margin: 20px;
    -webkit-box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
    box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}

.property-description
{
    background-color: #FAFAFC;
    width:14em;
    bottom:0em;
    padding: 0.5em 1em;
    text-align:center;
}

.property-image-title
{
    text-align:center;
    position:Relative;
    top:10%;
    color: white;
    font-size:1.2em;
}