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.

Die min-width CSS Eigenschaft legt die Mindestbreite eines Elements fest. Sie verhindert, dass der verwendete 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 seinem Anzeige-Wert ab. Bei Blockboxen, Inline-Boxen, Inline-Blöcken und allen Tabellen-Layout-Boxen wird auto zu 0.

Für Flex-Elemente und Grid-Elemente ist der Mindestbreitenwert entweder die angegebene vorgeschlagene Größe, wie der Wert der width-Eigenschaft, die übertragene Größe, berechnet, wenn das Element ein aspect-ratio gesetzt hat und die Höhe eine feste Größe ist, andernfalls wird die min-content Größe verwendet. Wenn das Flex- oder Grid-Element ein Scroll-Container ist oder wenn ein Grid-Element mehr als eine flexible Spaltenbahn überspannt, beträgt die automatische Mindestgröße 0.

max-content

Die intrinsisch bevorzugte min-width.

min-content

Die intrinsische Mindestbreite min-width.

fit-content

Verwenden Sie den verfügbaren Platz, aber nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Verwendet die fit-content-Formel mit dem verfügbaren Platz, der durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).

stretch

Begrenzt die Mindestbreite der margin box des Elements auf die Breite seines enthältenden Blocks. Es wird versucht, die Margin-Box so zu gestalten, dass sie den verfügbaren Platz im enthältenden Block ausfüllt, also auf eine Weise ähnlich wie 100%, aber die resultierende Größe auf die Margin-Box anwendend, anstatt auf die Box, die durch box-sizing bestimmt wird.

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

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

Mindestbreite eines Elements 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

BCD tables only load in the browser

Siehe auch