<div id="outerDiv">
<div id="innerDiv"></div>
<div id="remainderDiv"></div>
</div>
#outerDiv, #innerDiv, #remainderDiv{
height: 100px;
}
#outerDiv{
width: 55.5px;
z-index: 1;
background-color: red;
}
#innerDiv{
width: calc(100% - 10px);
z-index: 100;
background-color: blue;
float: left;
}
#remainderDiv{
width: 10px;
z-index: 100;
background-color: green;
float: left;
}
Result: https://i.sstatic.net/7NFOS.png
This fiddle shows a problem with Chrome 37. Using the calc(100% - 10px) function on an element with decimal pixels, it always rounds down. This causes strange things.
In the example, the outer div has a width of 50.5px. The two inner divs have calc(100% - 10px) and 10px as widths. Even though this should be 50.5 total, it still shows the red background.
Issue seems to be introduced in Chome 37. Does anyone know if this issue has already been reported and/or if it will be solved?
Edit: I understand from the comments that the issue is already present for a longer time. Is there any (cross-browser) neat way to fix this?
This is a known Chrome bug that is now fixed and will soon be merged to the dev Channel.
