Ahmad Shadeed behandelt das CSS-Größen-Schlüsselwort fit-content. Es ist nützlich! Es kommt nur nicht super oft vor. Ich erwische mich dabei, wie ich min-content viel häufiger verwende, zum Beispiel beim Festlegen der Höhe eines grid-template-row.
Das Schlüsselwort fit-content steht tatsächlich in engem Zusammenhang mit min-content und max-content – es hat nur eine kleine Heuristik, der es folgt, die Ahmad schön als Flussdiagramm darstellt.
Mein Lieblingsanwendungsfall wird hier behandelt: die Größenänderung einer <figure> mit fit-content, sodass sie sich sauber um die <img> wickelt. So kann sie, auch wenn das Bild den übergeordneten Bereich nicht ausfüllt, ein Block-Element bleiben.
Wir haben letztes Jahr auch PPKs Tiefgang zu fit-content behandelt. Eine der wichtigsten Erkenntnisse, um es zu verstehen, ist zu wissen, dass es im Wesentlichen eine Kurzschreibweise für Folgendes ist:
.box {
width: fit-content;
/* ... is the same as ... */
width: auto;
min-width: min-content;
max-width: max-content;
}