W3docs
de
Anmelden

CSS min-width Eigenschaft

Mit der CSS-Eigenschaft min-width legen Sie die Mindestbreite des Inhaltsbereichs eines Elements fest. Eigenschaftswerte mit Beispielen.

Die Eigenschaft min-width legt die Mindestbreite eines Elements fest. Sie verhindert, dass der Wert der Eigenschaft width jemals unter den von Ihnen für min-width angegebenen Wert fällt, egal wie schmal der verfügbare Platz wird.

Diese Seite erläutert, was min-width bewirkt, wie sie mit width und max-width zusammenwirkt, welche Werte sie akzeptiert (einschließlich der Schlüsselwörter min-content/max-content/fit-content) und welche häufige Flexbox-Falle min-width löst.

Wie min-width mit width und max-width zusammenwirkt

Wenn Sie min-width zusammen mit den Eigenschaften width und max-width verwenden, fungiert min-width als untere Grenze. Der Browser berechnet die Breite und begrenzt sie dann auf den Bereich min-width … max-width:

  • Wenn width kleiner als min-width ist, wird das Element auf min-width verbreitert.
  • Wenn width größer als max-width ist, wird das Element auf max-width verschmälert.

Mit anderen Worten: min-width setzt sich gegenüber einem kleineren width-Wert durch, und max-width setzt sich gegenüber einem größeren min-width-Wert durch – bei einem Konflikt hat min-width immer Vorrang. Das ermöglicht es Elementen, lesbar zu bleiben und gleichzeitig responsiv zu sein: Das Element kann auf breiten Bildschirmen wachsen, fällt aber nie unter eine nutzbare Größe.

Ein häufiger Anwendungsfall in der Praxis ist, zu verhindern, dass eine Spalte, eine Karte oder eine Schaltfläche in einem Flexbox- oder Grid-Layout zu schmal wird, wo untergeordnete Elemente sonst zur Anpassung schrumpfen würden.

Info

Negative Längenwerte sind unzulässig – min-width akzeptiert nur 0 oder einen positiven Längen-/Prozentwert.

Standardwert0
Anwendbar aufAlle Elemente, außer nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen.
VererbbarNein.
AnimierbarJa. Die Breite ist animierbar.
VersionCSS2
DOM-Syntaxobject.style.minWidth = "200px";

Syntax

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

Die Eigenschaft akzeptiert eine CSS-Länge (px, pt, em, rem usw.), einen Prozentsatz des umgebenden Blocks oder eines der Schlüsselwörter für intrinsische Größen, die in der Tabelle Werte weiter unten beschrieben sind.

Beispiele

Prozentwert

Wenn min-width ein Prozentwert ist, wird er relativ zur Breite des umgebenden Blocks aufgelöst. Hier wird width: 10px überschrieben, da min-width von 70% größer ist, sodass das Element auf 70 % des übergeordneten Elements verbreitert wird:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        min-width: 70%;
        background-color: #1c87c9;
        color: #ffffff
      }
    </style>
  </head>
  <body>
    <div>The min-width of this text is defined as 70%.</div>
  </body>
</html>
Probier es selbst »

Ergebnis

Browser-Darstellung eines div-Elements, dessen Breite durch einen min-width-Wert von 70 Prozent überschrieben wird

Fester Längenwert

In diesem Beispiel erhält ein Inline-Block-Element einen min-width-Wert von 10cm. Es wird mit einem einfachen span verglichen, das min-width: 0 hat, damit Sie sehen können, wie der Mindestwert die zweite Box zwingt, mindestens 10 cm breit zu bleiben, obwohl ihr Text kurz ist:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      span {
        background-color: #ccc;
        min-width: 0;
      }
      .example {
        min-width: 10cm;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Min-width property example</h2>
    <h3>Min-width: 0:</h3>
    <span>Minimum width is set to 0.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Minimum width is set to 10cm.</span>
  </body>
</html>
Probier es selbst »

Die min-width: 0 Flexbox-Falle

Standardmäßig kann ein Flex-Element nicht unter die Größe seines Inhalts schrumpfen – sein impliziter min-width-Wert ist auto, nicht 0. Deshalb können lange Wörter, Codeblöcke oder <pre>-Elemente innerhalb eines Flex-Containers überlaufen und das gesamte Layout strecken, anstatt umzubrechen oder zu scrollen.

Die Lösung besteht darin, min-width: 0 explizit auf das Flex-Element zu setzen, damit es unter seine Inhaltsgröße schrumpfen darf:

.flex-item {
  min-width: 0; /* allow this item to shrink below its content width */
  overflow: hidden; /* or use overflow-x: auto for scrollable content */
}

Weitere Informationen zur Steuerung des Verhaltens von geschrumpftem Inhalt finden Sie unter overflow und flex.

Werte

WertBeschreibungAusprobieren
lengthLegt eine Mindestbreite in px, pt, cm, em usw. fest. Standardwert ist 0.Ausprobieren »
%Legt die Mindestbreite als Prozentsatz der Breite des umgebenden Elements fest.Ausprobieren »
min-contentDie kleinste Breite, die der Inhalt einnehmen kann, ohne zu überlaufen (z. B. das längste Wort).
max-contentDie Breite, die der Inhalt einnehmen würde, wenn er nie umgebrochen wird.
fit-contentNutzt den verfügbaren Platz, aber nie mehr als max-content.
autoDer Standard – entspricht bei den meisten Elementen 0, bei Flex-Elementen jedoch der Inhaltsgröße.
initialSetzt die Eigenschaft auf ihren Standardwert (0).Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Verwandte Eigenschaften

  • width — legt die bevorzugte Breite fest, die durch min-width begrenzt wird.
  • max-width — legt die obere Grenze des Breitenbereichs fest.
  • min-height — das vertikale Gegenstück zu min-width.
  • box-sizing — steuert, ob Abstände und Rahmen zur Breite zählen.

Übung

Übung
Was ist die Funktion der 'min-width'-Eigenschaft in CSS?
Was ist die Funktion der 'min-width'-Eigenschaft in CSS?
Was this page helpful?