Anthony Kong Anthony Kong - 1 year ago 44
CSS Question

css calc expression is marked as invalid with flex-box

This is my less script:

@info-box: 185px;

.info {
width: ~"calc(100%-@{info-box})";


Less compiled it as expected to `width: calc(100%-185px);

However chrome marks this expression as invalid.

enter image description here

I want to know if it has anything to do with
display mode

I have used the calc formula for
and I got the same result.

If I set the
to a numeric value, the problem goes away.


Make sure there's space on both sides of the operator when using calc

calc(100% - 12px)
         ^-^------------The `calc` property is very particular
           about the spacing of the operator. (e.g. - + / *)

It used to drove me nuts when it would work sometimes but not other times. Then I read this article.