Come calc() funziona quando contiene percentuali?

Question

Recentemente ho riscontrato un comportamento imprevisto durante la progettazione di un layout del sito. Sono stato sorpreso di scoprire che il comportamento di calc() sembra cambiare totalmente a seconda che ci sia un'unità basata sulla percentuale ovunque all'interno del suo argomento.

Ecco una riproduzione minima.

.container { 
 
    font-size: 30px; 
 
    display: inline-block; 
 
    border: solid purple .1em; 
 
} 
 

 
.inner { 
 
    border: solid orange .1em; 
 
} 
 

 
.inner.em { width: 3em; } 
 
.inner.calc { width: calc(3em + 0%); }

<div class="container"> 
 
    <div class="inner em">abc</div> 
 
</div> 
 

 
<hr> 
 

 
<div class="container"> 
 
    <div class="inner calc">abc</div> 
 
</div>

La seconda è sorprendente per me, perché mi aspetterei che calc(3em + 0%) sarebbe identico a 3em. Tuttavia, ogni browser che ho testato mostra questo comportamento. Questo comportamento si verifica con qualsiasi percentuale. 0% non è speciale. Questa parte della spec css?

Answer 1

Il specs for calc dicono esplicitamente che non è risolto del tutto in quel momento:

Dove percentuali non vengono risolti al valore calcolato, non sono risolta in ‘calc()’ espressioni, per esempio 'Calc (100% - 100% + 1em)' risolve in 'calc (0% + 1em)', non in 'calc (1em)'. Se esistono regole speciali per calcolare le percentuali in un valore (ad esempio la proprietà 'altezza' ), si applicano ogni volta che un'espressione 'calc()' contiene le percentuali .

Vorrei indicativamente ipotizzare che 10.2:

Se la larghezza del blocco contenitore dipende dalla larghezza di questo elemento, quindi il layout risultante è definito nei CSS 2.1.

vale qui, poiché non v'è una percentuale coinvolta, così come con un width:150% per il blocco interno, il blocco esterno utilizza shrink-to-fit.