min-width

Die min-width-CSS-Eigenschaft legt die minimale Breite 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

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: white;
}

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

Syntax

/* <length> value */
min-width: 3.5em;
min-width: anchor-size(width);
min-width: anchor-size(--my-anchor 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 Werts für das angegebene Element hängt von seinem Anzeigewert ab. Für Blockboxen, Inline-Boxen, Inline-Blöcke und alle Tabellen-Layout-Boxen löst sich auto zu 0 auf.

Für Flex-Elemente und Gitterelemente ist der Mindestbreitenwert entweder die festgelegte vorgeschlagene Größe, wie z.B. der Wert der width-Eigenschaft, die übertragene Größe, berechnet, wenn das Element ein festgelegtes aspect-ratio 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 Spaltenreihe überspannt, ist die automatische Mindestgröße 0.

max-content

Die intrinsische bevorzugte min-width.

min-content

Die intrinsische minimale min-width.

fit-content

Verwendet 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, ersetzt durch das angegebene Argument, also min(max-content, max(min-content, argument)).

stretch

Beschränkt die Mindestbreite des Randkastens des Elements auf die Breite seines Umschließungsblocks. Es versucht, den Marginkasten den verfügbaren Raum im umschließenden Block ausfüllen zu lassen, verhält sich also ähnlich wie 100%, aber der resultierende Größe wird auf den Marginkasten angewendet, nicht auf den durch box-sizing bestimmten Kasten.

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

Formale Syntax

min-width = 
 auto | 
 <length-percentage [0,∞]> | 
 min-content | 
 max-content | 
 fit-content( <length-percentage [0,∞]> ) | 
 <calc-size()> | 
 <anchor-size()> | 
 stretch | 
 fit-content | 
 contain 

<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 

Beispiele

Minimale Breite eines Elements festlegen

table {
 min-width: 75%;
}
form {
 min-width: 0;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

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