CODEWITHSUNDEEP
cssinternet-explorercalccss-calc
Negin Basiri
Negin Basiri

Reputation: 1375

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?

Upvotes: 4

Views: 108

Answers (2)

Negin Basiri
Negin Basiri

Reputation: 1375

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);

Upvotes: 1

P.S.
P.S.

Reputation: 16392

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

I think, this should solve the problem.

Upvotes: 2

Related Questions