Calc di max, o massimo di calc in CSS

Question

E 'possibile fare qualcosa di simile

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

o

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

in CSS?

Answer 1

No, non è possibile. max() e min() sono stati eliminati dai valori e dalle unità CSS3. Possono tuttavia essere re-introduced in CSS4 Values and Units. Non esiste attualmente alcuna specifica per loro e la specifica calc() non menziona che entrambi sono validi all'interno di una funzione calc().

Answer 2

Una soluzione alternativa sarebbe quella di utilizzare width stesso.

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

Answer 3

Una soluzione 'puro' CSS è effettivamente possibile ora utilizzando media query:

.yourselector { 
    max-width: calc(100% - 80px); 
} 

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

Answer 4

@Amaud Esiste un'alternativa in modo da avere lo stesso risultato?

C'è un approccio css non js puro che otterrebbe risultati simili. Dovresti modificare il riempimento/margine del contenitore degli elementi parent.

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