CSS preferred size

A CSS preferred size is a size requested by a preferred-size property such as width or height. The final layout also depends on the applicable sizing algorithm, the CSS containing block and any CSS minimum size or CSS maximum size. Preferred therefore identifies an input to sizing, not an unconditional measurement of the final box.^[ref]

For a simple content-box block with no padding or borders, consider width: 300px; max-width: 100% in a 200-CSS pixel containing block. The maximum constraint limits the used width to 200 pixels. With a sufficiently wide containing block, the same preferred width can instead yield 300 pixels. The example assumes no other minimum constraint.

Values such as auto, percentages and content-based sizing keywords have context-dependent meanings. A percentage can depend on whether the relevant containing dimension is definite, and auto sizing can use different rules for ordinary blocks and CSS replaced elements. The word auto is not a universal synonym for one numeric width.

The properties also have applicability limits. A non-replaced inline box is not made into a fixed-size rectangle merely by assigning width and height. Relating a CSS preferred size to a CSS used value requires identifying the box kind and the layout rules that resolve its constraints.

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.^[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 iswhere $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.^[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.

A CSS minimum size is a lower constraint imposed by a minimum-size property such as min-width or min-height. It can prevent a CSS preferred size or available space from shrinking the generated box below a specified dimension.^[ref]

For a simple content-box block with no padding or borders, width: 180px; min-width: 240px produces a width of $240$ CSS pixels, assuming no other relevant constraint. If its containing width is only $200$ pixels, the minimum still does not automatically become $200$: the box can extend beyond its container. The resulting CSS overflow is a separate issue from whether the minimum was obeyed.

Contradictory bounds are also resolved systematically. With width: 180px; min-width: 320px; max-width: 200px, the $320$-pixel minimum takes precedence over the smaller CSS maximum size in this ordinary sizing case. A constraint interval whose upper endpoint is below its lower endpoint cannot be satisfied literally; the layout rules specify which requirement governs.^[ref]

The value auto should be interpreted using the relevant specification and layout context; modern layout modes can give an automatic minimum content-dependent behavior. It is not universally interchangeable with explicitly writing zero. When diagnosing a box that refuses to shrink, inspect its minimum constraints, CSS box-sizing and layout rules rather than only its declared preferred width.