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 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 Werts für das angegebene Element hängt von seinem Display-Wert ab. Für Block-Boxen, Inline-Boxen, Inline-Blöcke und alle Tabellenlayout-Boxen löst sich auto zu 0 auf.

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, die berechnet wird, wenn das Element ein aspect-ratio gesetzt hat und die Höhe eine feste Größe ist, ansonsten wird die min-content-Größe verwendet. Wenn das Flex- oder Grid-Element ein Scroll-Container ist oder ein Grid-Element sich über mehr als eine flexible Spaltenreihe erstreckt, 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, 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 Raum, ersetzt durch das angegebene Argument, d.h. min(max-content, max(min-content, argument)).

stretch

Beschränkt die Mindestbreite des margin box eines Elements auf die Breite seines umgebenden Blocks. Es versucht, die margin box so zu füllen, dass sie den verfügbaren Platz im umgebenden Block einnimmt, was in gewisser Weise ähnlich wie 100% wirkt, aber die resultierende Größe auf die margin box anwendet und nicht 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, sehen Sie sich den Abschnitt zur Browser-Kompatibilität an.

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 grundlegende CSS-Boxmodell
• CSS-Boxmodell Modul