title: CSS: calc() does not respect bottom padding in Firefox and IE
body: <p>I have a problem when I am using calc() in Firefox 32 and IE 11 the bottom padding of the div is not respected, in Chrome and Opera everything works.</p>
  
  <p>Main content should have a fixed height and content should be scrollable.</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="main-content"&gt;
    &lt;div class="header"&gt;header&lt;/div&gt;
    &lt;div class="content"&gt;
      content
      &lt;div class="long-content"&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        long content&lt;br /&gt;
        &lt;button type="button"&gt;Button&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and css:</p>
  
  <pre><code>.main-content {
    width: 100%;
    background-color: #595959;
    height: 300px;
  }
  
  .header {
    background-color: #000000;
    height: 50px;
  }
  
  .content {
    background-color: red;
    padding: 15px;
    height: calc(100% - 50px);
    overflow: auto;
    position: relative;
  }
  </code></pre>
  
  <p>How could I fix this?</p>
  
  <p><a href="http://jsfiddle.net/2g789bgv/" rel="nofollow">DEMO</a></p>