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, wann immer min-width größer als max-width oder width ist.

<length>

Definiert die min-width als absoluten Wert.

<percentage>

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

auto

Der Standardwert. Die Quelle des automatischen Wertes für das angegebene Element hängt von seinem Anzeige-Wert ab. Für Blockboxen, Inline-Boxen, Inline-Blöcke und alle Tabelleneinheits-Boxen wird auto zu 0.

Für Flex-Elemente und Grid-Elemente ist der Mindestbreitenwert entweder die angegebene empfohlene Größe, wie der Wert der width-Eigenschaft, die übertragene Größe, berechnet, wenn das Element ein aspect-ratio hat und die Höhe eine festgelegte 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, ist die automatische Mindestgröße 0.

max-content

Die von Natur aus bevorzugte min-width.

min-content

Die von Natur aus minimale min-width.

fit-content

Nutzt den verfügbaren Raum, 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, d.h. min(max-content, max(min-content, argument)).

stretch

Begrenzet die Mindestbreite der margin box des Elements auf die Breite seines enthältenden Blocks. Es wird versucht, die Randbox so zu gestalten, dass sie den verfügbaren Raum im enthältenden Block füllt und so ähnlich wie 100% wirkt, aber die resultierende Größe auf die Randbox und nicht auf die durch box-sizing bestimmte Box anwendet.

Hinweis: Um Aliase zu überprüfen, die von Browsern für den stretch-Wert verwendet werden, und deren Implementierungsstatus, sehen Sie im Abschnitt Browser-Kompatibilität nach.

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        

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