Bird
Raised Fist0
CSSmarkup~5 mins

Min and max functions in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Min and max functions help you set sizes that adapt to different screen sizes. They make your design flexible and look good everywhere.

When you want a box to be at least a certain size but not too big.
When you want text to grow but not get too large on big screens.
When you want padding or margins to adjust between a minimum and maximum value.
When you want to combine fixed and flexible sizes for layout parts.
When you want to keep elements readable and usable on small and large devices.
Syntax
CSS
min(value1, value2, ...)
max(value1, value2, ...)

min() picks the smallest value from the list.

max() picks the largest value from the list.

Examples
The width will be the smaller of 300 pixels or 50% of the viewport width.
CSS
width: min(300px, 50vw);
The font size will be at least 1rem but can grow bigger if 2% of viewport width is larger.
CSS
font-size: max(1rem, 2vw);
Top and bottom padding will be at least 10px or 2% of container width, whichever is bigger. Left and right padding will be the smaller of 20px or 5% of viewport width.
CSS
padding: max(10px, 2%) min(20px, 5vw);
Sample Program

This example shows a blue box. Its width will never be more than 300 pixels or more than half the screen width, whichever is smaller. The font size grows but never gets smaller than 1rem. Padding also adjusts between minimum and maximum values. Resize the browser window to see the changes.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Min and Max Functions Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 2rem;
    }
    .box {
      width: min(300px, 50vw);
      height: 150px;
      background-color: #4a90e2;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: max(1rem, 3vw);
      padding: max(10px, 2%) min(20px, 5vw);
      border-radius: 0.5rem;
      box-sizing: border-box;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box" role="region" aria-label="Example box using min and max functions">
    Resize the browser window.<br />
    The box width and font size change between minimum and maximum values.
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use units like px, rem, vw, or % inside min() and max().

Min and max help make your site look good on phones, tablets, and desktops without extra code.

Test by resizing your browser window or using device simulation in browser DevTools.

Summary

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

They help create flexible, responsive sizes for elements.

Use them to keep sizes between limits for better design on all devices.

Practice

(1/5)
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