Florence Maurice

Webthemen

fit-content und fit-content()

Geschrieben am:

Ich schreibe gerade an einem Artikel zu den Möglichkeiten, die Ausmaße in CSS zu bestimmen für die Zeitung https://www.webundmobile.de und dabei bin ich über fit-content gestolpert, das einiges Verwirrendes beinhaltet.

fit-content und fit-content()

Zuerst einmal sind derer zwei  - es gibt ein Schlüsselwort fit-content:

width: fit-content;

Und es gibt eine Funktion (erkennbar an den Klammern) fit-content():

width: fit-content(300px);

Schlüsselwort fit-content

Das Schlüsselwort fit-content funktioniert mit den herstellerspezifischen Präfixen bereits bei Firefox/Chrome und Safari. Ein Beispiel:

.el { 
background: yellow;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}

fit-content hat dieselbe Auswirkung wie max-content, d.h. bei einem Element mit Text wird dieses so breit, dass der Text nicht umbricht.

fit-content und max-content unterscheiden sich jedoch im Verhalten, wenn nicht genügend Platz zur Verfügung steht: dann bricht der Text mit fit-content um, bei max-content hingegen bricht er nicht um, auch wenn das zu einem horizontalen Scrollbalken führt.

fit-content und max-content im Vergleich (CodePen)

Allerdings – und das spricht gegen eine Verwendung: fit-content ist aus der CSS Sizing-Spezifikation geflogen und in die nächste Version der Spezifikation verbannt worden ("this section previously defined stretch and fit-content as keywords [...]. These keywords have been deferred to Level 4").

Die Funktion fit-content()

Allerdings findet sich die Funktion fit-content() in der CSS Sizing-Spezifikation. An sich kann man fit-content() bei allen Angaben schreiben, derzeit funktioniert es von der Browserunterstützung her nur bei Grid-Layout:

.container { 
display: grid;
grid-template-columns:
fit-content(300px) fit-content(300px) fit-content(300px);
grid-gap: 1rem;
}

(fit-content() bei Gridlayout)

Und was macht es genau? Im Endeffekt erlaubt es den Elementen so groß zu werden, wie der Inhalt es erforderlich macht, aber nicht größer als der in Klammern übergebene Wert.

Im Beispiel ist die erste Spalte schmal – da steht ja nur ein kurzes Wort. Die zweite Spalte ist breiter, weil mehr Text drinnen steht. In der dritten Spalte umbricht der Text, weil der Text, wenn er die maximale Ausdehnung bekommen würde, mehr Platz als die 300px benötigen würde. Und fit-content() sorgt dafür, dass bei 300px Schluss ist.

Die Formel für fit-content() lautet:

min(minimum, max(limit, max-content))

Das finde ich etwas verwirrend, einfacher ist die Erläuterung (und dann versteht man auch die Formel besser):

Die Ausmaße für fit-content() werden  nach eine der beiden Formeln berechnet:

  1. minmax(auto, max-content) oder
  2. minmax(auto, limit) - limit steht für das übergebene Argument

Ob die erste oder zweite Variantegenommen wird, hängt davon ab, was kleiner ist. Wenn `max-content` kleiner als `limit` ist, wird die erste Variante genommen, wenn `limit` (also das Argument) kleiner ist, wird die zweite genommen.

Vorgesehen ist, dass fit-content() wie alle intrinsischen Schlüsselwörter überall verwendet werden kann, wo man Ausmaße bestimmt, also neben Gridlayout auch bei flex-basis, width, column-width. Das funktioniert allerding derzeit noch nicht in den Browsern.

Bei Flexbox kann man ein fit-content()-ähnliches Verhalten erreichen, indem man keine flex-basis schreibt und als max-width den Wert, den man als Argument bei fit-content() angeben würde.

.flexbox { 
display: flex;
}
.flexbox >* {
max-width: 300px;
}

fit-content() bei Flexbox über max-* (ähnlich, nicht identisch)

Allerdings verhalten sich die Beispiele bei zu wenig verfügbarem Platz unterschiedlich.