Min and max functions in CSS - Browser Rendering Trace

Render Flow - Min and max functions

[Parse CSS] -> [Identify min()/max() functions] -> [Evaluate expressions inside functions] -> [Calculate final value] -> [Apply computed value to property] -> [Layout and paint]

The browser reads CSS, finds min() and max() functions, calculates their values by comparing inside expressions, then applies the result to style properties during layout and painting.

Render Steps - 3 Steps

Code Added:width: min(50vw, 300px);

Before

[div.box]
__________
|        |
|        |
|        |
|________|

→

After

[div.box]
_________________________
|                       |
|                       |
|                       |
|_______________________|

The width is set to the smaller value between 50% of viewport width and 300px, so the box width adjusts responsively but never exceeds 300px.

🔧 Browser Action:Evaluates min() function, calculates viewport width, compares with 300px, sets computed width, triggers layout recalculation.

Code Sample

A box with width limited to the smaller of 50% viewport width or 300px, and height at least 100px or 20% viewport height, with visible background and border.

CSS

<div class="box">Content</div>

CSS

div.box {
  width: min(50vw, 300px);
  height: max(100px, 20vh);
  background-color: lightblue;
  border: 2px solid navy;
  padding: 1rem;
  font-size: 1.2rem;
}

Render Quiz - 3 Questions

After applying step 1, what determines the box's width?

A The larger value between 50% viewport width and 300px

B The smaller value between 50% viewport width and 300px

C Always 300px

D Always 50% viewport width

Common Confusions - 2 Topics

Why does min(50vw, 300px) sometimes make the box smaller than expected?

Because min() picks the smallest value, if 50vw is less than 300px (like on a narrow screen), the width becomes 50vw, which can be smaller than 300px.

💡 min() always picks the smallest value, so the box shrinks on narrow viewports.

Why does max(100px, 20vh) sometimes make the box taller than 100px?

Because max() picks the largest value, if 20vh (20% of viewport height) is bigger than 100px, the height becomes 20vh, making the box taller on tall screens.

💡 max() ensures the box is never smaller than the largest value.

Property Reference

Property	Value Applied	Description	Visual Effect	Common Use
min()	min(value1, value2, ...)	Returns the smallest value among the arguments	Limits size to not exceed the smallest value	Responsive sizing, max width/height limits
max()	max(value1, value2, ...)	Returns the largest value among the arguments	Ensures size is at least the largest value	Minimum size constraints, responsive height/width

Concept Snapshot

min() picks the smallest value among its arguments, useful to limit max size. max() picks the largest value, useful to set minimum size. Both accept lengths, percentages, viewport units. They help create responsive, flexible layouts. Used in width, height, padding, margin, font-size, etc.