min-width

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die min-width-CSS-Eigenschaft legt die minimale Breite eines Elements fest. Sie verhindert, dass der genutzte Wert der width-Eigenschaft kleiner wird als der für min-width angegebene Wert.

Probieren Sie es aus

Die Breite des Elements wird auf den Wert von min-width gesetzt, wenn min-width größer ist als max-width oder width.

Syntax

css
/* <length> value */
min-width: 3.5em;
min-width: anchor-size(width);
min-width: anchor-size(--myAnchor self-inline, 200%);

/* <percentage> value */
min-width: 10%;

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fit-content(20em);
min-width: stretch;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: revert;
min-width: revert-layer;
min-width: unset;

Werte

<length>

Definiert die min-width als absoluten Wert.

<percentage>

Definiert die min-width als Prozentsatz der Breite des umgebenden Blocks.

auto

Der Standardwert. Die Quelle des automatischen Wertes für das angegebene Element hängt von dessen Anzeige-Wert ab. Für Block-Boxen, Inline-Boxen, Inline-Blöcke und alle Layout-Boxen von Tabellen wird auto zu 0 aufgelöst.

Für Flex-Elemente und Grid-Elemente ist der Minimalbreitenwert entweder die angegebene vorgeschlagene Größe, wie der Wert der width-Eigenschaft, die übertragene Größe, berechnet, wenn das Element ein aspect-ratio festgelegt hat und die Höhe eine bestimmte Größe ist, andernfalls wird die min-content-Größe verwendet. Falls das Flex- oder Grid-Element ein Scroll-Container ist oder ein Grid-Element mehr als eine flexible Spalte überspannt, liegt die automatische Mindestgröße bei 0.

max-content

Die intrinsisch bevorzugte min-width.

min-content

Die intrinsisch minimale min-width.

fit-content

Verwendet den verfügbaren Platz, aber nicht mehr als max-content, also min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Verwendet die fit-content-Formel, wobei der verfügbare Platz durch das angegebene Argument ersetzt wird, also min(max-content, max(min-content, argument)).

stretch

Begrenzt die minimale Breite der Margin-Box des Elements auf die Breite seines umgebenden Blocks. Es versucht, die Margin-Box an den verfügbaren Platz im umgebenden Block anzupassen, verhält sich in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Margin-Box anstatt auf die Box an, die durch box-sizing bestimmt wird.

Hinweis: Um die von Browsern verwendeten Aliase für den stretch-Wert und dessen Implementierungsstatus zu überprüfen, sehen Sie sich den Abschnitt Browser-Kompatibilität an.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente außer nicht ersetzte Inlineelemente, Tabellenzeilen und Zeilengruppen
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge
AnimationstypLängenangabe, Prozentsatz oder calc();

Formale Syntax

min-width = 
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Beispiele

Minimale Elementbreite festlegen

css
table {
  min-width: 75%;
}

form {
  min-width: 0;
}

Spezifikationen

Specification
CSS Box Sizing Module Level 3
# min-size-properties
CSS Box Sizing Module Level 4
# sizing-values

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
min-width
anchor-size()
Experimental
auto
fit-content
fit-content()
Experimental
max-content
min-content
stretch
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch