Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >min-width

min-width

min-width: auto | <length> | <percentage> | min-content | max-content | fit-content

Legt die Mindestbreite fest, unter die das Element nicht schrumpft – auch nicht mit einer kleineren width oder wenn sein Elternelement schmaler wird. Längerer Inhalt macht das Element trotzdem breiter.

Werte

  • auto – der Standard: keine Grenze bei gewöhnlichen Elementen (0), die minimale Inhaltsbreite bei Flex- und Grid-Elementen.
  • Länge oder Prozent (der Breite des Elternelements).
  • min-content, max-content, fit-content – nach dem Inhalt.

Initialwert: auto. Vererbt: nein. Gilt für: alle Elemente außer Inline-Elementen, Tabellenzeilen und Zeilengruppen.

Beispiele

Schaltflächen mit kurzem Text sind gleich breit, längerer Text macht die Schaltfläche breiter:

<a class="button" href="#">OK</a>
<a class="button" href="#">Abbrechen</a>
<a class="button" href="#">Speichern und weiter</a>

.button {
  display: inline-block;
  min-width: 100px;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #0088d1;
  border-radius: 4px;
}
Ergebnis

Standardmäßig schrumpft ein Flex-Element nicht unter die Breite seines Inhalts (ein langes Wort, eine URL). min-width: 0 erlaubt es:

<div class="row">
  <div class="text">https://www.example.com/eine-sehr-lange-adresse-ohne-leerzeichen</div>
</div>
<div class="row">
  <div class="text zero">https://www.example.com/eine-sehr-lange-adresse-ohne-leerzeichen</div>
</div>

.row {
  display: flex;
  width: 240px;
  margin-bottom: 8px;
  border: 2px dashed #999;
}
.text {
  background: #eaf7ff;
  white-space: nowrap;
}
.zero {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
Ergebnis
https://www.example.com/eine-sehr-lange-adresse-ohne-leerzeichen
https://www.example.com/eine-sehr-lange-adresse-ohne-leerzeichen

Das erste Element ragt aus der Zeile heraus, das zweite schrumpft und der Text endet mit Auslassungspunkten.

Worauf Sie achten sollten

  • Ist min-width größer als max-width, gewinnt min-width.
  • min-width hat auch Vorrang vor width.
  • Überlaufende Flex-Elemente mit langem Inhalt (Tabellen, Code, lange Links) behebt fast immer min-width: 0 am Element. Im Grid hilft minmax(0, 1fr) statt 1fr.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
width
max-width
min-height
flex-shrink