title: CSS calc() rounding
body: <p>This problem is similar to <a href="https://stackoverflow.com/questions/25662159/chrome-37-calc-rounding">Chrome 37 calc rounding</a></p>
  
  <p>But the real problem was a bit more complicated, and the solution provided doesn't work for this case:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#outerDiv, #leftDiv, #middleDiv, #rightDiv{
      height: 100px;
      position: absolute;
  }
  #leftDiv, #rightDiv{
      width: 20px;
      z-index: 100;
      background-color: green;
  }
  #outerDiv{
      width: 100.5px;
      z-index: 1;
      background-color: red;
  }
  #middleDiv{
      width: calc(100% - 40px);
      z-index: 100;
      background-color: blue;
      left: 20px;
  }
  #leftDiv{
      left: 0;
  }
  #rightDiv{
      right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outerDiv"&gt;
      &lt;div id="leftDiv"&gt;L&lt;/div&gt;
      &lt;div id="middleDiv"&gt;M&lt;/div&gt;
      &lt;div id="rightDiv"&gt;R&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Result in Chrome: <a href="https://i.imgur.com/vNvFfHC.jpg" rel="nofollow noreferrer">http://i.imgur.com/vNvFfHC.jpg</a></p>
  
  <p>To explain a bit more: The width of the outerDiv is dependant on random amount of text, which is in another div which is also inside the outerDiv. The left and right divs contain an image, so their width is static.</p>
  
  <p>The current solution we have is to change the calc to: calc(100% - 40px <strong>+ 1px</strong>); Is there any better solution?</p>