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 setzt die Mindestbreite eines Elements. Sie verhindert, dass der used value 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 umschließenden 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 Tabellenlayout-Boxen entspricht auto 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, falls das Element ein aspect-ratio gesetzt hat und die Höhe eine definierte 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 Spaltenlinie überspannt, ist die automatische Mindestgröße 0.

max-content

Die intrinsische bevorzugte min-width.

min-content

Die intrinsische minimale min-width.

fit-content

Nutzt 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 mit dem verfügbaren Raum, der durch das angegebene Argument ersetzt wird, also min(max-content, max(min-content, argument)).

stretch

Begrenzt die Mindestbreite der margin box des Elements auf die Breite seines umschließenden Blocks. Es versucht, die Margin-Box im verfügbaren Raum des umschließenden Blocks zu füllen, verhält sich also in gewisser Weise ähnlich wie 100%, wobei die resultierende Größe jedoch auf die Margin-Box und nicht auf die durch box-sizing bestimmte Box angewendet wird.

Hinweis: Um Aliase zu überprüfen, die von Browsern für den stretch-Wert verwendet werden und deren Implementierungsstatus, 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