CSS maximum size
= CSS maximum size
{c}
A <CSS maximum size> is an upper constraint supplied by a maximum-size property such as `max-width` or `max-height`. It participates in finding the <CSS used value>, together with the <CSS preferred size>, <CSS minimum size> and applicable layout rules.<CSS Box Sizing Module Level 3 by World Wide Web Consortium>[§3.1.3, Maximum Size Properties]{ref}
For a simple block with zero padding and borders, `width: 500px; max-width: 400px; min-width: 240px` gives a used width of $400$ <CSS pixels>. With the same constraints but preferred width $180$, the used width is $240$. Once these fixed dimensions are resolved, this simplified calculation is
$$
w=\max\{m,\min(p,M)\},
$$
where $p$ is the tentative width, $m$ the minimum and $M$ the maximum. It expresses the order of limiting the tentative width and then enforcing the minimum in this case.<Visual formatting model details in CSS 2.2 by W3C>[§10.4, algorithm for minimum and maximum widths]{ref}
If the minimum exceeds the maximum, the minimum wins: `min-width: 320px; max-width: 200px` does not squeeze the box below its $320$-pixel minimum. Also check <CSS box-sizing> before interpreting which edge the numbers measure.
A maximum constraint limits the box's size; it does not guarantee that every unbroken descendant fits or specify clipping. Such content may cause <CSS overflow>. Percentage constraints likewise require the appropriate <CSS containing block> and a usable dimension reference. These qualifications make `max-width: 100%` a sizing instruction rather than a universal promise that nothing can extend outside a container.