Calc max or max calc in CSS

Question

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?

Answer 1

No, you can’t. max() and min() were excluded from CSS3 values ​​and units. However, they can be re-entered in CSS4 values ​​and units . There is currently no specification for them, and the calc() specification does not mention that they are valid inside the calc() function.

Answer 2

A “clean” css solution is now possible using media queries:

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

Answer 3

A workaround would be to use width .

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

Answer 4

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

This solution demonstrates that @ gert-sønderby's comment on this answer works:
The answer was to use min-width , not max-width .

Here is what he had to say:

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

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

Here is the code (it’s 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 class="parent600"> 600px parent <div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div> </div> <div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div> <div class="parent500"> 500px parent <div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div> </div> <div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div> <div class="parent400"> 400px parent (child expands to width of 500px) <div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div> </div> <div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div> <h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2> <div class="parent400"> 400px parent <div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div> </div> <div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div> <div class="parent500"> 500px parent <div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div> </div> <div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div> <div class="parent600"> 600px parent <div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div> </div> <div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div> 

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

Also note that over time, the max() and min() functions may be introduced in CSS, but as of April 2019, they are not part of the specification.

• Here you can check max() browser compatibility:
  https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility .

• Here is a draft proposal:
  https://drafts.csswg.org/css-values-4/#comp-func .
  Scroll to the top of the page to see the date of the last change (to date, the last change was made on April 5, 2019).

Answer 5

@Amaud Is there an alternative to achieve the same result?

There is a non-js pure css approach that would achieve similar results. You will need to adjust the indentation / indentation of the parent element container.

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

 <div class="parent"> <div class="child"></div> </div>