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

Question

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?

Possible duplicate of ["width: calc(100% / 3);" not working properly in any IE](http://stackoverflow.com/questions/30480442/width-calc100-3-not-working-properly-in-any-ie) — Jayme Brereton, Nov 16 '16 at 23:57

score 2 · Accepted Answer · answered Nov 17 '16 at 00:10

2

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

I think, this should solve the problem.

answered Nov 17 '16 at 00:10

P.S.

15,970
14
62
86

score 1 · Answer 2 · answered Nov 17 '16 at 00:18

1

Both solutions resolved the issue however I prefer solution 2.

First: fix the rounded pixel in calculation

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

Second: use 100vw instead of 100%

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

answered Nov 17 '16 at 00:18

Negin Basiri

1,305
2
26
47

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

2 Answers2