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

Answer 2

This is a known Chrome bug that is now fixed and will soon be merged to the dev Channel.

https://code.google.com/p/chromium/issues/detail?id=448796&q=label%3ACr-Blink&colspec=ID+Pri+M+Week+ReleaseBlock+Cr+Status+Owner+Summary+OS+Modified