CSS · Layout and visual systems
How do min(), max() and clamp() work?
Short answer
min() picks the smallest value, max() picks the largest, and clamp(min, preferred, max) limits a preferred value to a range. They accept mixed units and are useful for fluid type and spacing.
These functions resolve at used-value time, so they can combine units and custom properties. clamp is effectively max(minimum, min(preferred, maximum)), which means the minimum wins if the bounds conflict.
.title {
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}
.wrap {
width: min(100% - 2rem, 70rem);
padding: max(1rem, 2vw);
}How to use them
- clamp(min, preferred, max) keeps a value inside a range
- min(a, b) is useful for shrinking a width without media queries
- max(a, b) guarantees a floor, such as a minimum padding
- They can be nested inside calc and inside each other
- The preferred value can use vw, percentages, rem or custom properties
Fluid type with clamp is convenient, but the minimum and maximum should still be readable at user zoom levels. Do not set the minimum so small that the text is inaccessible on a narrow screen.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between min() and max()?
- 2How does clamp handle a minimum larger than the maximum?
- 3Can clamp values mix units?
- 4When is clamp better than a media query?
Say it in the interview
min returns the smaller value, max returns the larger one, and clamp limits a preferred value between a minimum and maximum. They can mix units, so I use clamp with a vw-based preferred value for fluid type and min for container widths. The minimum still has to be readable, because clamp does not solve accessibility by itself. If the bounds conflict, the minimum wins.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.