max-width

max-width überschreibt width, aber min-width überschreibt max-width.

<length>

Definiert die max-width als absoluten Wert.

<percentage>

Definiert die max-width als prozentualen Anteil der Breite des umgebenden Blocks.

none

Keine Begrenzung der Größe des Kastens.

max-content

Die intrinsische bevorzugte max-width.

min-content

Die intrinsische minimale max-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 Platz, ersetzt durch das angegebene Argument, d.h. min(max-content, max(min-content, argument)).

stretch

Begrenzt die maximale Breite der Randbox eines Elements auf die Breite seines umgebenden Blocks. Es versucht, die Randbox so zu gestalten, dass sie den verfügbaren Platz im umgebenden Block ausfüllt, verhält sich also in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Randbox statt auf den durch box-sizing bestimmten Kasten an.

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

Stellen Sie sicher, dass Elemente, die mit einer max-width gesetzt sind, nicht abgeschnitten werden und/oder andere Inhalte verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.

• MDN Verständnis von WCAG, Leitfaden 1.4 Erklärungen
• Verständnis des Erfolgs-Kriteriums 1.4.4 | W3C Verständnis WCAG 2.0

max-width = 
  none                                      |
  <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        

In diesem Beispiel ist das "child" entweder 150 Pixel breit oder die Breite des "parent", je nachdem, welches kleiner ist.

HTML

<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

CSS

#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

Ergebnis

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