Anthony Kong Anthony Kong - 6 months ago 11
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
flex-box
display mode

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

If I set the
width
or
max-width
to a numeric value, the problem goes away.

Answer

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.