html - フローティング div 内の img - 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 px に増加します。通常、コンテナーの div は、画像と共に 600 ピクセルまで拡大する必要があります。Firefox (20.0.1) では、imageContainer divの幅は 400 ピクセルに設定されていますが、画像が伸びます。私のmax-width:50%テスト ケースでは、700 ピクセルの最大値が得られます。

Chrome と IE では、これは問題なく動作します。これを修正する方法は？

編集：状況を説明するjsfiddleは次のとおりです：http://jsfiddle.net/dSr7s/