Perché il calcolo CSS (100% -250px) non funziona?

Question

L'ho provato nelle versioni più recenti di Firefox, Chrome, IE 11. In nessuno di questi browser funziona quando si utilizza la funzione CSS calc() per calcolare ad es. width. Per quanto posso vedere, l'ho applicato correttamente. Per avere un riferimento si potrebbe voler controllare

http://www.sitepoint.com/css3-calc-function/

Perché questo non funziona?

div { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: calc(100%-250px); 
 
}

<div></div>

Demos:

http://codepen.io/anon/pen/wazZWm

http://jsfiddle.net/h5mzcow1/

Edit:

Sì, questa domanda si è sviluppata per diventare un duplicato nel corso di numerose modifiche, ma ritengo che questo dovrebbe rimanere qui, poiché illustra il problema meglio di ad esempio CSS calc() not working. Inoltre, la risposta è molto meglio.

Answer 1

E 'perché devi mettere uno spazio tra l'operatore + o - in modo per farlo funzionare correttamente.

div { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: calc(100% - 250px); 
 
}

<div></div>

Dalla documentazione MDN:

Nota: I + e - gli operatori devono sempre essere circondato da spazi bianchi. L'operando di calc(50% -8px) per esempio verrà analizzato come percentuale seguita da un tratto negativo, un'espressione non valida, mentre l'operando di calc(50% - 8px) è una percentuale seguito da un meno segno e una lunghezza. Inoltre, calc(8px + -50%) viene considerato come una lunghezza seguita da un segno più e una percentuale negativa. Gli operatori * e / non richiedono spazi bianchi, ma l'aggiunta per coerenza è consentita e consigliata.

Fonte: MDN

W3C Documentation