CSS min-content und max-content Größe an Inhalt anpassen

Block-Elemente wie <div> passen sich in CSS leider nicht automatisch der Größe ihres Inhalts an - jedenfalls nicht so wie man es oft erwarten würde.

Als Beispiel nehmen wir hier ein div, das ein Bild plus Text enthält. Zum Text wissen wir nur, dass dieser maximal 400px breit sein kann.

<div class="container">
    <div class="child-image">Bild</div>
    <div class="child-text">
        Lorem ipsum dolor sit amet, consetetur sadipscin ...
    </div>
</div>

.container {
    border: 4px solid slateblue;
    padding: .5em;
}    
.child-image {
    width: 2em;
    height: 2em;
    float: left;
    margin: .5em;
    background: green;
}

.child-text {
    max-width: 400px;
}

Standardmäßig erstreckt sich ein div über die gesamte verfügbare Breite. Wir möchten aber, dass auch die Breite sich an den Inhalt anpasst.
Dazu müssen wir im CSS des Elternelements Angaben dazu machen, wie sich dessen height und width-Attribute verhalten sollen. Das erreichen wir zum Beispie mit dem Wert min-content:

.container {
    width: min-content;
}
    

Das Elternelement mit width: min-content; nimmt die minimal benötigte Breite des Inhalts ein. In diesem Fall wird es also gerade so breit, dass der Text ohne Wortumbrüche hineinpasst. Der Text ist so aber nicht gut lesbar. Wenn wir möchten, dass das Elternelement auch die maximale Breite des Texts berücksichtigt, können wir width: max-content; nutzen.

.container {
    width: max-content;
}
    

Jetzt breitet sich das Elternelement auf die maximal mögliche Breite seines Inhalts aus.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project