percentage max-height on image ignored in firefox

Question

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 !

Answer 1

It understands it the way the W3C specifications state. For max-height to work, something other than the content itself needs to be explicitly setting the height of its containing element. This is why when you set height: 100% it works, because now you are explicitly telling .article to take its height from its parent (rather than its content). But when you have .article set with max-height, then it is still the content driving its calculated height, just with the limitation of not sizing past the .container height. And in your case, the content is the img itself.

In this fiddle, you can see that the .article is in fact constraining itself to the height of .container, but is allowing the content of itself (the img) to overflow to a larger height. The img is not constrained by its max-height because .article does not have an explicit height set, but is in fact getting its height from the img (only it is limited that it cannot go past the height of its container).