These four functions let a CSS value be computed rather than hardcoded — mixing units, reacting to the viewport, or picking between two values based on which is currently larger or smaller.
Mixes different units in one expression — something plain CSS can't do on its own.
.sidebar {
width: calc(100% - 250px);
}
.box {
height: calc(100vh - 80px);
}The most common calc() mistake
A space is required around every operator inside calc() — calc(100% -250px) is invalid, calc(100% - 250px) is correct.
Picks whichever value is smaller at any given moment — useful for a width that should never exceed a fixed maximum.
.card {
width: min(90%, 600px); /* never wider than 600px, but shrinks below that on small screens */
}.button {
padding: max(12px, 3%); /* never smaller than 12px */
}clamp(minimum, preferred, maximum) — the preferred value is used as long as it stays between the min and max.
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
/* never smaller than 1.5rem, never larger than 3rem,
scales with viewport width in between */
}| Function | Picks |
|---|---|
| calc() | The result of a mixed-unit math expression |
| min() | The smallest of the values listed |
| max() | The largest of the values listed |
| clamp() | The preferred value, kept between a min and max |
Practice it interactively
This site's Clamp tool (under Tools) generates a clamp() value from a min/max size and viewport range — the fastest way to get fluid typography sizing right without trial and error.