grid: 1fr 2fr; verhindern dass 1fr-Spalte < 1fr

[Rolf B]

Hallo michaah,

neulich beim Zahnarzt: „Jetzt beißen Sie mal die Zähne zusammen und machen Sie den Mund auf!“

Ähnlich geht es deinem Browser. Du sagst ihm: 1fr („Beißen Sie die Zähne zusammen!“). Und dann gibt's das Browser-Stylesheet und die CSS Defaults. Die sagen: overflow:visible („machen Sie den Mund auf!“).

Armer Browser. Für eins muss er sich entscheiden. Und wie jeder gute Spieß scheißt Du ihn dafür dann auch noch zusammen.

Also: Entkrampfe seine Zähne. Erlaube ihm, den überlaufenden Text zu scrollen (overflow: scroll) oder zu verstecken (overflow:hidden).

Oder sperr ihm nicht so lange Wörter in den Mund. Gönne Dir eine Handvoll ­ und streue sie vorsichtig über die langen Worte im Text. Dann bröseln sie sanft auseinander und passen auch in den 1fr Schlitz.

PS: Padding kannst Du mit Sprungfedern versehen, wenn Du es in % statt in px bemisst. Du kannst auch die CSS-Funktionen min, max oder clamp verwenden, um einen Maximalwert, Minimalwert oder Bereich für das Padding festzulegen. Beispielsweise sorgt min(10%, 2em) für ein Padding von 10%, aber maximal 2em. Oder clamp(0.25em, 5%, 1.5em) für ein Padding von 5%, das sich im Intervall 0.25em bis 1.5em bewegt. Ab FF 75 und Chrome 79 verfügbar. Und Safari 11.1. Natürlich nicht im IE.

Rolf