max-width

max-width: 150px;

max-width: 20em;

max-width: 75%;

max-width: 20ch;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Change the maximum width.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: #ffffff;
}

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 umschließenden Blocks.

none

Keine Begrenzung für die Größe der Box.

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, wobei der verfügbare Platz durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).

stretch

Begrenzt die maximale Breite der Randbox des Elements auf die Breite seines umschließenden Blocks. Es versucht, die Randbox an den verfügbaren Raum im umschließenden Block anzupassen, was in gewisser Weise einem 100% Verhalten ähnelt, aber die resultierende Größe auf die Randbox anwendet und nicht auf die Box, die durch box-sizing bestimmt wird.

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

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

• MDN Understanding WCAG, Leitfaden 1.4 Erläuterungen
• Understanding Success Criterion 1.4.4 | W3C Understanding 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 sein oder die Breite des "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 grundlegende CSS-Boxmodell
• CSS-Box-Modul Modul