CSS min-width - Mindestbreite der Elemente festlegen

In CSS kann den HTML-Elementen mit der Eigenschaft min-width eine Mindestbreite zugewiesen werden, die nicht unterschritten wird, selbst wenn man das Browserfenster verkleinert. Das genaue Verhalten hängt davon ab, ob man das Element zusätzlich mit float umfließen lässt (rechts oder links) oder nicht.

  • Wird einem Element mit min-width eine Mindestbreite vorgegeben, nimmt es die volle Breite des verfügbaren Bereichs ein, wenn man es nicht umfließen lässt (ohne float).
  • Wird dem Element die Eigenschaft min-width zugewiesen und lässt man das Element mit float umfließen, nimmt es automatisch die volle Mindestbreite ein.
  • Wird dem Element die Eigenschaft min-width zugewiesen und lässt man das Element mit float umfließen und ist der Inhalt breiter als die Mindestbreite, wird es automatisch vergrößert.

Nachfolgend ist das Verhalten schematisch abgebildet.

Verhalten der Elemente bei min-width

Die Eigenschaft min-width kann man den Block-Elementen zuweisen. Bei Inline-Elementen ist das nur möglich, wenn es sich dabei um Elemente handelt, die replaced sind. Damit sind Elemente gemeint, die ihren Ursprung außerhalb der Datei haben, wie das z.B. bei Bildern der Fall ist. Nachfolgend ist die Syntax anhand eines Beispiels abgebildet.

CSS-Code für min-width

Angabe des Werts für die Mindestbreite

Für min-width kann man als Wert nicht nur einen numerischen Wert mit der Einheit px angeben. Die nachfolgend aufgeführten Werte und Einheiten sind ebenfalls möglich. Nicht alle Browser unterstützen diese jedoch. Der Platzhalter <Zahl> steht dabei für eine numerische Angabe vor der Einheit. Am Ende jedes Eintrags ist eine Erläuterung zu dem Wert bzw. zu der Einheit.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>% (Prozentuale Angabe, bezieht sich auf das umgebende Block-Element)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • auto (Standardwert, überlässt die Berechnung dem Browser)
  • inherit (Vererbt vom Elternelement)
  • initial (Setzt auf den Standardwert)

Sonstige Keyword-Werte (zum Teil experimentell)

  • min-content (Kleinste intrinsische Breite)
  • -webkit-min-content (Browser-Präfix für min-content in Chrome)
  • -moz-min-content (Browser-Präfix für min-content in Firefox)
  • max-content (Bevorzugte intrinsische Breite)
  • -webkit-max-content (Browser-Präfix für max-content in Chrome)
  • -moz-max-content (Browser-Präfix für max-content in Firefox)
  • intrinsic (früherer Vorschlag für max-content, z.T. von Browsern implementiert)
  • fit-content (Passend zum Inhalt)
  • -webkit-fit-content (Browser-Präfix für fit-content in Chrome)
  • -moz-fit-content (Browser-Präfix für fit-content in Firefox)
  • available (Verfügbare Breite)
  • fill-available (Keyword für available in Chrome)
  • -moz-available (Browser-Präfix für available in Firefox)
  • border-box (Zusatz, falls genutzt, gilt Wert/Einheit für border-box)
  • content-box (Zusatz, falls genutzt, gilt Wert/Einheit für content-box)
  • unset (Setzt auf den Wert, der über inherit vererbt worden ist und auf initial, falls nichts vererbt wurde)

Mindestbreite mit calc() berechnen

Nach dem Standard Box-Modell wird mit min-width die Mindestbreite für den Inhaltsbereich der Box definiert, der content-box genannt wird. Evtl. Abstände und Rahmen werden zur Breite hinzu addiert und vergrößern die Box. Das kann manchmal zu unerwünschten Ergebnissen führen, z.B. wenn man die Angaben für den Inhaltsbereich in Prozent macht und für den Rahmen in Pixel. Wenn man das Standardverhalten nicht möchte, kann man entweder das Box-Modell über box-sizing umstellen oder man kann als Wert eine Berechnung mit calc() angeben und die Maße für die Abstände abziehen.

Nachfolgend ist anhand eines Beispiels die Syntax für die Angabe der Mindestbreite mit calc() abgebildet. Die Formel für die Berechnung wird innerhalb der runden klammern angegeben.

min-width mit calc berechnen

Gleichzeitige Angabe von width, min-width und max-width

Es kann vorkommen, dass man für ein Element mit width eine Breite angibt und zusätzlich min-width für die Mindestbreite oder max-width für die maximale Breite. In solchen Fällen gilt, dass max-width die Eigenschaft width überschreibt und dass min-width wiederum max-width überschreibt.

Verhalten bei großen Inhalten mit overflow beeinflussen

Auch wenn mit der Eigenschaft min-width eine Mindestbreite angegeben wird und die Boxen bei großen Inhalten sich prinzipiell verbreitern, kann es bei bestimmten Konstellationen passieren, dass eine Begrenzung vorliegt, z.B. wenn man das Element nicht mit float umfließen lässt und dem Elternelement eine feste Breite vorgegeben wurde. In solchen Fällen ragen übergroße Inhalte, z.B. lange Wörter oder Bilder, aus der Box hinaus.

Große Inhalte in einer Box mit min-width

Das Hinausragen aus der Box kann über die Eigenschaft overflow unterbunden werden. Man kann z.B. angeben, dass der hinausragende Teil nicht angezeigt wird oder an der Box Scrollleisten eingeblendet werden.

Eigenschaft overflow bei Elementen mit min-width

In der Praxis zählt die Eigenschaft min-width zu den eher weniger verwendeten Eigenschaften, da die Boxen standardmäßig sowieso die volle Breite des Anzeigebereichs einnehmen und bei geringeren Breiten meistens feste Maße vergeben werden.