Flexible boundaries with Math functions in CSS

We are living in a world of responsive webdesign where the fonts are not set in pixels to avoid fixed font-size, the layout grid columns are made with flexbox, grid or just percentage widths. But where is flexibility, there must be also safety nets to catch the layout when it falls out of the admissible boundaries.

Let’s suppose we set up a width of a div element in percentage:

div {
   width: 80%;
}

If there is no maximum width for the layout, the element can get really large on a wide screen. So we go to our box of tools and take out min-width and max-width.

div {
   min-width: 300px;
   width: 80%;
   max-width: 600px;
}

Regarding this scenario:

• if the width of the parent element is above 750 pixels then the max-width will kick in for the div and will hold the width on the 600px boundary.
• If the website is on a small device where the width of the parent element is 375 px, our element pushes down below 300px but the min-width does not permit that to happen, freezing the width on 300.
• In a power game min-width wins over width and also wins over max-width

But, wait ! We can do the same boundary setup in one line instead of 3.

div {
   width: clamp(300px, 80%, 600px);
}

The clamp mathematical method accepts free values: the minimum, the preferred and the maximum value. The process behind this is the following:

div {
  width: max(300px,min(80%, 600px));
}

Limiting flexible font size

In the past you had to use media queries to limit font sizes:

As you can see this is a lot of code, when we could just write:

div {
  font-size: clamp(14px, 3.5vw, 30px);
}

Set boundaries by character number

div {
    width: clamp(9ch,10%,15ch);
}

Using more then 2 values

The min() and max() math methods can handle a lot of values and choose the best fit.

For example if you would have a really complex criteria list that you need to fulfill, how would you handle it?

div {
  width: min(10ch,calc(100% - 20px), 80vw);
}

In a complicated word where the width of a div depends of which one is smaller?

• 10x the width of the “0” character
• the width of the parent element minus 20px(for ex the parent element width is 1200px width 10px padding left and right)
• 80% of the viewport

Conclusion:

CSS code can be shorter if you have the right tools for it. The min(), max() and clamp() methods can help you with that and the browser support is excellent. Where do you want to use it, this is your choice. You could use it on width or font-size or much more unusual occasions like hsl color values or brightness filter. So the question remains: The min width in the clamp() method overrides the max-width or it behaves in a different manner? The answer is: Yes, min-width in clamp() will override max-width !

0