Is it possible to do something like this

max-width: calc(max(500px, 100% - 80px))

or

max-width: max(500px, calc(100% - 80px)))

in CSS?

3

8 Answers

A 'pure' css solution actually is possible now using media queries:

.yourselector { max-width: calc(100% - 80px);
}
@media screen and (max-width: 500px) { .yourselector { max-width: 500px; }
}

1

No you cannot. max() and min() have been dropped from CSS3 Values and Units. They may be re-introduced in CSS4 Values and Units however. There is currently no spec for them, and the calc() spec does not mention that either are valid inside a calc() function.

7

min(), max(), and clamp() are finally available!

Support starts in Firefox 75, Chrome 79, and Safari 11.1 (clamp is available in Safari 13.1).

min() and max() take any number of arguments.

clamp() has syntax clamp(MIN, VAL, MAX) and is equivalent to max(MIN, min(VAL, MAX)).

min() and max() may be nested. They can be used in calc() as well as outside of it, they also may contain math expressions, that means you can avoid calc() when using them.

Therefore the original example can be written as:

max-width: max(500px, 100% - 80px);

2

A workaround would be to use width itself.

max-width: 500px;
width: calc(100% - 80px);

5

While @david-mangold's answer above, was "close" it was incorrect.
(You can use his solution if you want a minimum width, instead of a maximum width).

This solution demonstrates that @gert-sønderby comment to that answer does work:
The answer should have used min-width, not max-width.

This is what it should have said:

min-width: 500px;
width: calc(100% - 80px);

Yes, use min-width plus width to emulate a max() function.

Here's the codepen (easier to see the demo on CodePen, and you can edit it for your own testing).

.parent600, .parent500, .parent400 { height: 80px; border: 1px solid lightgrey;
}
.parent600 { width: 600px;
}
.parent500 { width: 500px;
}
.parent400 { width: 400px;
}
.parent600 .child, .parent500 .child, .parent400 .child { min-width: 500px; width: calc(100% - 80px); border: 1px solid blue; height:60px;
}
.ruler600 { width: 600px; border: 1px solid green; background-color: lightgreen; height: 20px; margin-bottom: 40px;
}
.width500 { height: 20px; width: 500px; background-color: lightyellow; float: left;
}
.width80 { height: 20px; width: 80px; background-color: green; float: right;
}
.parent600 .wrong, .parent500 .wrong, .parent400 .wrong { max-width: 500px; width: calc(100% - 80px); border: 1px solid red; height:60px;
}

<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div> 600px parent <div>child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>
<div><div>500px</div>20<div>80px</div></div>
<div> 500px parent <div>child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>
<div><div>500px</div><div>80px</div></div>
<div> 400px parent (child expands to width of 500px) <div>child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div><div>500px</div><div>80px</div></div>
<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div> 400px parent <div>child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div><div>500px</div><div>80px</div></div>
<div> 500px parent <div>child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>
<div><div>500px</div><div>80px</div></div>
<div> 600px parent <div>child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>
<div><div>500px</div>20<div>80px</div></div>

That said, @andy's answer above may be easier to reason about, and may be more appropriate in many use cases.

Also note, that eventually a max() and a min() function may be introduced to CSS, but as of April 2019 it is not part of the spec.

• Here you can check for max() Browser compatibility:
  .

• Here is the draft of of the proposal:
  .
  Scroll to the top of the page to see the last revision date (As of today, it was last revised on 5 April 2019).

1

Change max to Max, you will see the dirty magic

max-width: Max(500px, calc(100% - 80px)))

1

@Amaud Is there an alternative in order to have the same result ?

There is a non-js pure css approach that would achieve similar results. You would need to adjust the parent elements container padding/margin.

.parent { padding: 0 50px 0 0; width: calc(50%-50px); background-color: #000;
}
.parent .child { max-width:100%; height:50px; background-color: #999;
}

<div> <div></div>
</div>

This is only supported in dart-sass .

You can also make use of string interpolation (similar to CSS variables) for this to work outside of dart-sass

max-width: #{"max(500px, calc(100% - 80px))"}

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy