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 Prozentsatz der Breite des enthaltenden Blocks.

none

Kein Limit für die Größe des Kastens.

max-content

Die intrinsische bevorzugte max-width.

min-content

Die intrinsische minimale max-width.

fit-content

Nutzt den verfügbaren Raum, jedoch nicht mehr als max-content, das heißt 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, das heißt min(max-content, max(min-content, argument)).

stretch

Begrenzt die maximale Breite des margin box des Elements auf die Breite seines containing block. Es versucht, die margin box so zu gestalten, dass sie den verfügbaren Raum im containing block ausfüllt, ähnlich wie 100%, jedoch wird die resultierende Größe auf die margin box angewandt und nicht auf den Kasten, der durch box-sizing bestimmt wird.

Hinweis: Um zu prüfen, welche Aliase von Browsern für den stretch-Wert verwendet werden und dessen Implementierungsstatus, siehe den Abschnitt Browser-Kompatibilität.

Stellen Sie sicher, dass Elemente mit einer max-width 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 Erfolgskriteriums 1.4.4 | W3C Verständnis von 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 wird das "child" entweder 150 Pixel breit oder so breit wie das "parent", je nachdem, was 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 CSS-Grundlagen-Kastenmodell
• CSS-Kastenmodell Modul