title: percentage max-height on image ignored in firefox
body: <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;article class="article"&gt;
          &lt;img class="article-img" src="bordeaux.jpg" /&gt;
      &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container{
      width:500px;
      height:200px;
  }
  .article{
      max-height:100%;
  }
  .article-img{
      max-height:100%;
  }
  </code></pre>
  
  <p>see its jsfiddle in <strong>Firefox</strong></p>
  
  <p><a href="http://jsfiddle.net/UETMr/4/" rel="noreferrer">http://jsfiddle.net/UETMr/4/</a></p>
  
  <p>I needed to set <strong>.article to height:100%</strong> for image to shrink in Firefox</p>
  
  <p>can someone explain how does firefox understand percentage max-height and its containers ?</p>
  
  <p>thanks in advance !</p>