title: Using calc() to transition width and height in IE
body: <p>I've come across an issue today where trying to use CSS transitions to change an object's dimensions with calc() aren't working in IE. Or, rather, they're working in the sense that the calculated values are being applied but the transition rules are being ignored.</p>
  
  <p>See an example here: <a href="http://jsfiddle.net/32Qr7/" rel="nofollow noreferrer">http://jsfiddle.net/32Qr7/</a></p>
  
  <pre><code>.block {
    width: 350px; height: 100px;
    background-color: red;
    margin: 10px; padding-left: 10px;
    transition: all 1s ease-in-out;
  }
  
  .block:hover {
    width: calc(100% - 50px);
    height: calc(150px + 10%);
  }
  </code></pre>
  
  <p>In this example, a div exists which changes its' width, height, and background-color over the course of one second on hover. In IE the background color still animates smoothly, but the width and height change is instantaneous.</p>
  
  <p>This is pretty big issue for me as I have a responsive web app with drawers that slide out from the side, and the rest of the layout has to adjust to compensate. Since I'm dealing with a multitude of screen sizes I can't use hard-coded values.</p>
  
  <p>(And yes, I looked at <a href="https://stackoverflow.com/questions/21142923/ie-10-11-css-transitions-with-calc-do-not-work">IE 10 + 11: CSS transitions with calc() do not work</a> hoping for a solution there, but that question doesn't involve dimension changes, and as such the accepted solution there doesn't work for me.)</p>
  
  <p>Does anyone know of a workaround for this issue, or have any other alternate strategies to suggest? I'm hoping to be able to do it in CSS and avoid having to fall back to using jQuery animation techniques or somesuch.</p>