img inside floated div - div不会延伸图像宽度

Question

我在Firefox中遇到了一个奇怪的情况。我的HTML设置如下：

<div class="tab">
    <div class="imageContainer">
        <img src="some-url" class="image" /> 
    </div>
</div>

.tab {
    height: 600px;
    width: 100%; // The document width, 
    overflow: auto;
}

.imageContainer {
    float: left;
    height: 100%;
    max-width: 50%; 
    overflow: hidden;
}

.image {
    height: 100%;
}

原始图像的宽度为400 px，当应用图像上的height:100%时，它会增加到600像素。通常，容器div应与图像一起拉伸至600像素。在Firefox（20.0.1）上，imageContainer div的宽度设置为400像素，但图像会拉伸。在我的测试用例中，max-width:50%产生的最大值为700 px。

在Chrome和IE上，这没有任何问题。如何解决这个问题？

编辑：这是一个解决问题的方法：http://jsfiddle.net/dSr7s/