Negin Basiri Negin Basiri - 21 days ago 6
CSS Question

Calc function in IE roundes the value and made items to push to next line

I have set the width of element using calc function as below

width: calc((100% - (2rem * 2)) / 3);


In Chrome the computed width is 412.663px in IE however it's computed as 412.67px so that in IE the last item pushed to next line/row.

If I manually set the width in IE to 412.663px the items show in one line as expected. Which means rounding the decimals in IE computed width is an issue here.

Any idea how can I get IE computed width as precise as Chrome/Firefox?

Answer

Try to use 100vw instead of 100% for your calculation: width: calc((100vw - (2rem * 2)) / 3);.

I think, this should solve the problem.