Chrome 37 calc rounding

Question

    

    



#outerDiv, #innerDiv, #remainde         


        

Answer 1

After inspecting the elements it seems clear that:

1) width: 55.5px; is being rounded up to 56px and

2) width: calc(100% - 10px); - the 100% width is being rounded down to 55px

this leaves 1px left of red in the 56px wide container.

So as a work-around just simply refrain from adding a width to you remainderDiv,

and use a different method for 'filling up' the container such as overflow:hidden

FIDDLE

This way the remainder div will either be 10px or 11px - but at least the layout won't break