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

http://jsfiddle.net/yz8cwj3a/

Resultado:http://i.imgur.com/DYor2yb.png

Esse violão mostra um problema no Chrome 37. Usando a função calc (100% - 10px) em um elemento com pixels decimais, ele sempre é arredondado para baixo. Isso causa coisas estranhas.

No exemplo, a div externa tem uma largura de 50,5px. As duas divs internas têm calc (100% - 10px) e 10px como larguras. Embora deva ser 50,5 total, ainda mostra o fundo vermelho.

O problema parece ter sido introduzido no Chome 37. Alguém sabe se esse problema já foi relatado e / ou se será resolvido?

Editar: Entendo pelos comentários que o problema já está presente há mais tempo. Existe alguma maneira pura (entre navegadores) de corrigir isso?