Container höhe automatisch dem Inhalt folgen lassen

[Runshak]

Hallo,

ich habe für eine Homepage eine Seite erstellt, welche die Mitglieder anzeigt. Dafür habe ich "cards" erstellt. Jedes Mitglied bekommt eine solche.

Dazu habe ich einen Container erstellt und dort drin die "cards". Leider schweben die "cards" über dem Container und der Container wird nicht über die gesamte Höhe der "cards" angezeigt. Gibt es eine Möglichkeit das besser zu machen, sodass die Höhe automatisch sich dem Inhalt des Containers anpasst?

.container{
    max-width: 1250px;
    margin: 0 auto;
    background: #1567AD;
    font-size: 24px;
    padding: 25px;
    margin-bottom: 15px;
    height: auto;
}

.member {
    width: 20%;
    height: auto;
    float: left;
    box-shadow: 5px 5px 15px #000;
    position: relative;
    display: block;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    margin: 0 10px;
    background: #003F98;
}

.member img {
    width: 100%;
}

.member h3 {
    margin: 0;
    text-transform: uppercase;
    font-size: 25px;
    color: #EC6B0D;
}

<div class="container">
        
        <div class="member">
            <img src="Grafiken/img_avatar.jpg">
            <h3>Peter Müller</h3>
            <p>Technical Manager</p>
            <h5 style="text-align: center; color: #EC6B0D">
                [email protected]
            </h5>
        </div>
        <div class="member">
            <img src="Grafiken/img_avatar.jpg">
            <h3>Peter Müller</h3>
            <p>Technical Manager</p>
            <h5 style="text-align: center; color: #EC6B0D">
                [email protected]
            </h5>
        </div>
        <div class="member">
            <img src="Grafiken/img_avatar.jpg">
            <h3>Peter Müller</h3>
            <p>Technical Manager</p>
            <h5 style="text-align: center; color: #EC6B0D">
                [email protected]
            </h5>
        </div>
        <div class="member">
            <img src="Grafiken/img_avatar.jpg">
            <h3>Peter Müller</h3>
            <p>Technical Manager</p>
            <h5 style="text-align: center; color: #EC6B0D">
                [email protected]
            </h5>
        </div>
    <!-- </div> -->
        <p style="Color: #1567AD">
            Lorem Ipsum
        </p>
</div>

das Lorem Ipsum am Ende ist unsichtbar und sorgt dafür, dass der Container von der Höhe bis unter die "cards" geht. Im css kann ich zwar die height des Containers angeben, allerdings müsste ich jetzt für jede Screenbreite die Höhe erst händisch anpassen und testen. Mit "auto" als height funktioniert es leider nicht. Hat jemand einen Tipp für mich oder Verbesserungsvorschlag?

 

[Sailor]

Benutze CSS Flexbox und vor allem verzichte auf 'float'-
.https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

[Runshak]

Herzlichen Dank @Sailor!

hat bestens funktioniert.

bei Container folgendes hinzugefuegt und bei .member das float geloescht.
Container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}