fit-content und fit-content()

Hier gibt es eine knallharte Tiefenanalyse von PPK für CSS-Nerds. Wenn Sie min-content (das ist die kleinste Größe, die ein Element basierend auf seinem Inhalt haben kann) und max-content (die größte Größe, die der Inhalt eines Elements erzwingen kann) verstanden haben, dann ist es nur noch ein kleiner Schritt zum Verständnis von fit-content. Wie PPK sagt, ist es eine Kurzschreibweise für

.box {
  width: fit-content;

  /* ... is the same as ... */
  width: auto;
  min-width: min-content;
  max-width: max-content;
}

Das bedeutet, dass das Element seine Größe zwischen dem Minimum und dem Maximum ändern kann.

Mein Gehirn denkt dabei immer an die nur leicht verwickelte UI-Situation, bei der eine horizontale Navigation zentriert werden muss und aus irgendeinem Grund einen eigenen Hintergrund benötigt. min-content funktioniert nicht, da es alles zu schmal quetscht. max-content funktioniert nicht, da es dann kein Umbruch erlaubt. Daher ist fit-content der Brei der drei Bären (nicht zu viel und nicht zu wenig).

PPKs Artikel enthält viele weitere Details zu Browser-Eigenheiten und sehr effektive interaktive Grafiken. Lesen Sie ihn unbedingt – besonders wenn Sie sich selbst als tiefgehend über CSS informiert betrachten, denn es wird schnell demütigend, wenn man sich mit der Funktion fit-content() in CSS Grid auseinandersetzt. Wie spielt zum Beispiel 1fr fit-content(200px) 1fr in einem Template?

1fr min(min(max-content, available-size), max(min-content, 200px)) 1fr

Hinweis: „wobei available-size die verfügbare Breite im Grid ist.“ Puh!

Direkter Link →