CSS minimum size (source code)

= CSS minimum size
{c}

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.<CSS Box Sizing Module Level 3 by World Wide Web Consortium>[§3.1.2, Minimum Size Properties]{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.<Visual formatting model details in CSS 2.2 by W3C>[§10.4, final minimum-width step]{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.