CSS - Hauteur d'une div selon son contenu

Signaler
-
Messages postés
14770
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
27 février 2021
-
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;
}

1 réponse

Messages postés
14770
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
27 février 2021
278
A la place de "height", tu peux peut être essayer "min-height".