Calc of max, or max of calc in CSS

问题:

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?

回答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.

回答2:

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;   } } 

回答3:

A workaround would be to use width itself.

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

回答4:

@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; }

文章来源: Calc of max, or max of calc in CSS