title: calc() not working in Firefox
body: <p>I am trying to use calc() to get my page contents to fit on the page perfectly. I have a header with a height of 52px. I am trying to make a container 100% of the page -50px to it fits onto the page perfectly, however as it does work in Chrome, Edge, and Internet Explorer, it doesn't in Firefox.</p>
  
  <p>Chrome:
  <a href="https://i.stack.imgur.com/r8IkD.png" rel="noreferrer">Chrome result</a></p>
  
  <p>Firefox:
  <a href="https://i.stack.imgur.com/CF41b.png" rel="noreferrer">Firefox result</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#container {
  
   width: 20%;
  
   height: 100%;
  
   height: calc(100% - 52px);
  
   height: -moz-calc(100% - 52px);
  
   height: -webkit-calc(100% - 52px);
  
   float: left;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>