min-width

min-width: 150px;

min-width: 20em;

min-width: 75%;

min-width: 40ch;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Change the minimum width.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: #ffffff;
}

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

<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 Anzeigewert ab. Für Blockboxen, Inlineboxen, Inlineblöcke und alle Tabellenlayoutboxen 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, falls das Element ein festgelegtes aspect-ratio besitzt 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 einen flexiblen Spalten-Track überspannt, ist die automatische Mindestgröße 0.

max-content

Die intrinsisch bevorzugte min-width.

min-content

Die intrinsische minimale min-width.

fit-content

Nutzt den verfügbaren Platz, jedoch 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 Raum, 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 umgebenden Blocks. Es versucht, die Margin-Box zu füllen und so den verfügbaren Raum im umgebenden Block zu nutzen. In gewisser Weise verhält es sich ähnlich wie 100%, aber es wird die resultierende Größe auf die Margin-Box angewendet und nicht auf die Box, die durch box-sizing bestimmt wird.

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

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> = 
  <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        

• max-width
• width
• min-inline-size
• min-block-size
• box-sizing
• Einführung in das CSS-Boxmodell Leitfaden
• CSS-Boxmodell Modul