Calc of max, or max of 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         


        

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