title: Nested CSS calc not working on IE 11 and Edge
body: <p>I trying to scale a div height using the following CSS code. everything was working fine on Chrome and FF browser but it's not working on IE11 and IE Edge.</p>
  
  <p>Chrome &amp; FF:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>Height:calc((100vh - 100%) + 30px);
  </code></pre>
  
  <p>When I try to put on Edge inspect its converted to:</p>
  
  <pre class="lang-css prettyprint-override"><code>Height:calc(30px + 100vh + -100%);
  
  
  .flyout-container {
      text-align: left;
      visibility: hidden;
      position: fixed;
      top: 64px!important;
      bottom: auto;
      right: 0;
      width: 464px;
      background-color: #fff;
      z-index: 999;
      overflow: hidden;
      border-bottom: 4px solid #81d8d0;
      max-height: inherit;
      transition: .4s ease;
      padding: 0 16px 0 2.5vw;
      height: 0;
  }
  
  
  .flyout-container.active {
      padding-top: 2.5vw;
      bottom: 0;
      visibility: visible;
      overflow: hidden;
      max-height: none;
      height: calc((100vh - 100%) + 30px);
  }
  </code></pre>
  
  <p>Is there anything I can do to make IE correctly render calc()?</p>