percentage max-height on image ignored in firefox

HTML:

<div class="container">
    <article class="article">
        <img class="article-img" src="bordeaux.jpg" />
    </article>
</div>

CSS:

.container{
    width:500px;
    height:200px;
}
.article{
    max-height:100%;
}
.article-img{
    max-height:100%;
}

see its jsfiddle in Firefox

http://jsfiddle.net/UETMr/4/

I needed to set .article to height:100% for image to shrink in Firefox

can someone explain how does firefox understand percentage max-height and its containers ?

thanks in advance !