Min-, Max- Lengths and Float

min-width, max-width and their height counterparts keep fluid sizes within limits, and min(), max() and clamp() (Numerical Functions) do the same inside one value:

Limits that keep fluid boxes usable from phone to desktopCSS

img, video { max-width: 100%; height: auto; }                  /* shrinks with its column */
.page { width: min(100% - 2rem, 70rem); margin-inline: auto; } /* phone gutter, desktop cap */
.hero { min-height: 100svh; }                                  /* grows if text wraps */
.thumb { float: left; width: min(40%, 12rem); margin: 0 1rem 0.5rem 0; }

Floats no longer build layouts, but they still wrap text around an image, which flexbox cannot; a capped percentage width keeps the text beside it readable on a phone. One fixed-width element wider than the screen makes the whole page scroll sideways; find it by running [...document.querySelectorAll('*')].filter(e => e.offsetWidth > innerWidth) in the console.

MENU

Min-, Max- Lengths and Float