parent div's width larger than children's width in Firefox

Question

I have a strange issue in Firefox.

I have a div with height defined in constant px value, and there is an img element within that. I have no problem with this setup in chrome, but in firefox parent div's width turns out to be larger than the img in it.

This is the html structure:

<div class="wrapper">
    <div class="imageHolder">
        <img src='dasource'>
    </div>
</div>

And this is the css:

.wrapper {
    width: 900px;
}

.imageHolder {
    height: 400px;
    width: auto;
    background-color: green;
    float: left;
    max-width: 50%;
    overflow: hidden;
}

.imageHolder img {
    height: 100%;
}

http://jsfiddle.net/MXudn/6

As explained in this fiddle, in firefox, the parent div turns out to be larger than the image in it.

Any ideas why this is the case?

Answer 1

This does look like a bug in Firefox to me. For some reason overflow: hidden is causing the parent div to use the width of the unscaled image rather than post-scaling.

http://jsfiddle.net/MXudn/8

<div class="imageHolder">
    <img src='http://placehold.it/650x650' />
<div>

.imageHolder {
    height: 400px;
    background-color: green;
    float: left;
    overflow: hidden;
}

.imageHolder img {
    height: 100%;
}

In this stripped down example, you can clearly see the issue. The image is originally 650px wide, rescaled based on height, it becomes 400px wide. The parent however, remains 650px wide.

If you do not need the overflow: hidden simply removing that fixes the problem.

http://jsfiddle.net/MXudn/12/

EDIT: Firefox bugzilla ticket for this issue.