Min and max functions in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the computed width of the box?

Consider this CSS code for a box. What will be the final width of the box in pixels when rendered in a browser?

CSS

div {
  width: min(50vw, 300px);
}

A The width will always be 300px regardless of viewport size.

B The width will be 50% of the viewport width or 300px, whichever is smaller.

C The width will be 50% of the viewport width regardless of 300px.

D The width will be the larger of 50vw and 300px.

💡 Hint

Remember, min() picks the smallest value from the list.

The min() function chooses the smallest value between 50vw (50% of viewport width) and 300px. So the box width will never exceed 300px and will shrink if 50vw is smaller.

❓ rendering

intermediate

Which CSS rule sets the height to the larger value?

You want a box to have a height that is at least 200px but grows with 30% of the viewport height. Which CSS rule achieves this?

A height: max(200px, 30vh);

B height: min(200px, 30vh);

C height: 200px + 30vh;

D height: calc(max(200px, 30vh));

💡 Hint

Use the function that picks the bigger value.

The max() function picks the larger value between 200px and 30vh, ensuring the height is never less than 200px but grows with viewport height.

❓ selector

advanced

Which CSS snippet correctly limits font size responsively?

You want the font size to be at least 1rem, but no more than 2rem, and scale with 5vw in between. Which CSS rule achieves this?

A font-size: min(1rem, max(5vw, 2rem));

B font-size: max(min(1rem, 5vw), 2rem);

C font-size: min(max(1rem, 5vw), 2rem);

D font-size: max(1rem, min(5vw, 2rem));

💡 Hint

Think about nesting max and min to clamp a value between two limits.

The correct pattern to clamp a value between a minimum and maximum is max(minimum, min(value, maximum)). Here, it ensures font size is at least 1rem, at most 2rem, scaling with 5vw.

❓ layout

advanced

What is the width of the container on a 600px wide screen?

Given this CSS, what is the container width in pixels when the viewport width is 600px?

CSS

.container {
  width: max(300px, min(50vw, 400px));
}

A 300px

B 300px if 50vw is less than 300px, else 50vw

C 400px

D 300px if 50vw is less than 300px, else 400px

💡 Hint

Calculate 50vw first, then apply min and max functions step by step.

50vw of 600px is 300px. Then min(50vw, 400px) is min(300px, 400px) = 300px. Then max(300px, 300px) is 300px. So the width is 300px.

❓ accessibility

expert

How do min() and max() help improve accessibility in responsive design?

Which statement best explains how using CSS min() and max() functions can improve accessibility for users on different devices?

A They disable zoom on mobile devices to keep layout fixed.

B They automatically add ARIA labels to elements based on size.

C They allow content to resize within limits, preventing text from becoming too small or too large, improving readability.

D They force all elements to have the same size regardless of screen.

💡 Hint

Think about how size limits affect user experience and readability.

Using min() and max() lets designers set size boundaries so text and elements stay readable and usable on all screen sizes, which helps accessibility.

Practice

1. What does the CSS function min() do when used in a style rule?

easy

A. It selects the largest value from the given list of values.

B. It multiplies all the values together.

C. It averages all the values given.

D. It selects the smallest value from the given list of values.

Solution

1. Step 1: Understand the purpose of min()

   The min() function compares all values inside it and picks the smallest one.

2. Step 2: Compare with other functions

   Unlike max() which picks the largest, min() picks the smallest value.

3. Final Answer:

   It selects the smallest value from the given list of values. -> Option D

4. Quick Check:

   min() = smallest value [OK]

Hint: Remember: min() picks smallest, max() picks largest [OK]

Common Mistakes:

• Confusing min() with max()
• Thinking min() averages values
• Assuming min() multiplies values

2. Which of the following is the correct syntax to set a width using the max() function in CSS?

easy

A. width: max(100px, 50%);

B. width: max[100px, 50%];

C. width: max{100px, 50%};

D. width: max 100px, 50%;

Solution

1. Step 1: Recall CSS function syntax

   CSS functions use parentheses () to enclose arguments, separated by commas.

2. Step 2: Check each option's syntax

   Only width: max(100px, 50%); uses parentheses and commas correctly: max(100px, 50%).

3. Final Answer:

   width: max(100px, 50%); -> Option A

4. Quick Check:

   Correct CSS function syntax uses parentheses [OK]

Hint: CSS functions always use parentheses () [OK]

Common Mistakes:

• Using square brackets or curly braces instead of parentheses
• Omitting commas between values
• Writing function name without parentheses

3. Consider the CSS rule:
width: min(300px, max(50%, 200px));
What will be the computed width if the container is 400px wide?

medium

A. 300px

B. 200px

C. 50%

D. 400px

Solution

1. Step 1: Evaluate the inner max() function

   max(50%, 200px) compares 50% of 400px (which is 200px) and 200px. Both are equal, so result is 200px.

2. Step 2: Evaluate the outer min() function

   min(300px, 200px) picks the smaller value, which is 200px.

3. Final Answer:

   200px -> Option B

4. Quick Check:

   min(300px, max(50%, 200px)) = 200px [OK]

Hint: Calculate inner max() first, then outer min() [OK]

Common Mistakes:

• Confusing which function to evaluate first
• Miscalculating 50% of container width
• Choosing max value instead of min

4. Identify the error in this CSS snippet:
height: min(100px max(50%, 150px));

medium

A. Using px and % together is invalid.

B. max() cannot be nested inside min().

C. Missing comma between 100px and max() arguments.

D. min() requires only one argument.

Solution

1. Step 1: Check syntax of min() arguments

   Arguments inside min() must be separated by commas. Here, 100px and max(50%, 150px) are missing a comma.

2. Step 2: Validate nesting and argument types

   Nesting max() inside min() is allowed. Mixing units like px and % is valid in these functions.

3. Final Answer:

   Missing comma between 100px and max() arguments. -> Option C

4. Quick Check:

   Arguments in CSS functions must be comma-separated [OK]

Hint: Always separate function arguments with commas [OK]

Common Mistakes:

• Forgetting commas between arguments
• Thinking nesting functions is invalid
• Believing mixed units cause errors here

5. You want a box width that is at least 150px but no more than 40% of the viewport width. Which CSS rule correctly uses min() and max() to achieve this?

hard

A. width: max(150px, min(40vw, 100%));

B. width: min(150px, max(40vw, 100%));

C. width: min(max(150px, 40vw), 100%);

D. width: max(min(150px, 40vw), 100%);

Solution

1. Step 1: Understand the requirement

   The width should never be less than 150px (minimum) and never exceed 40% viewport width (maximum).

2. Step 2: Analyze width: max(150px, min(40vw, 100%));

   max(150px, min(40vw, 100%)) means: pick the larger between 150px and the smaller of 40vw or 100%. This ensures width is at least 150px but no more than 40vw.

3. Step 3: Check other options

   Options B, C, and D do not correctly enforce the min and max limits as required.

4. Final Answer:

   width: max(150px, min(40vw, 100%)); -> Option A

5. Quick Check:

   Use max() for minimum size, min() for maximum size [OK]

Hint: Use max() for minimum, min() for maximum limits [OK]

Common Mistakes:

• Swapping min() and max() roles
• Not nesting functions correctly
• Ignoring viewport units for responsiveness