title: firefox css max-width and max-height inside max-height div
body: <p>I have a div with max-height and an image inside it, that should use max-width:100% and max-height:100%. In chromium, this works, but firefox uses only max-width and ignores max-heigth. </p>
  
  <pre><code>div#overlaycontent{
    position:relative;
    overflow:hidden;
    height:100%;
    overflow-y:auto; 
  }
  
  div#pic{
    overflow:hidden;
    position:relative;
    box-sizing:border-box;
    float:right;
    width: -moz-calc(100% - 250px);
    width: -webkit-calc(100% - 250px);
    width: -o-calc(100% - 250px);
    width: calc(100% - 250px); 
    max-height:90%;
  }
  
  img#zoompic{
    max-width:100%;
    max-height:100%;
    display:block;
  }
  </code></pre>
  
  <p>How can I achieve that firefox will use both? max-width <em>and</em> max-height ?</p>