After coming across this question, I stumbled upon an intriguing observation.
Given that negative widths are considered illegal and should be disregarded, one would assume that style properties such as width:-200px; and width:calc(0% - 200px); would have no impact. Surprisingly, the former is indeed ignored while the latter results in a width of 0 being applied.
Take a look at this example:
div {border:1px solid; background:lime;}
#badwidth {width:-200px;}
#badcalc {width:calc(0% - 200px);}Div with negative width:
<div id="badwidth"> </div>
Div with calculated width:
<div id="badcalc"> </div>If the width property was truly ignored, the div would occupy its full width like the first one. However, it collapses to a width of 0 (as seen by the black border line on the left).
To provide further context, here are some additional div elements to illustrate 1) that calc(0% - 200px) alone is not problematic, and 2) they function correctly, indicating that the initial snippet is an anomaly.
div {border:1px solid; background:lime;}
#calc {margin-right:calc(0% - 200px);}Plain div:
<div> </div>
Using calc(0% - 200px) appropriately:
<div id="calc"> </div>So, why do regular widths and calculated widths display contrasting behaviors?
If this discrepancy existed solely in one browser, it could be dismissed as a bug. Yet, all browsers exhibit the same behavior! Therefore, there must be some factor that has eluded me. What could it be?