Question

If we have floated div A, and div B with overflow: hidden next to it – div B should take all available space next to floated div. And if we have min-width set on the div B and window size is too small to keep this two divs on the same line – div B should wrap under the div A and take all available width of parent. This exact behaviour we can see in all major browsers except IE8, even IE7 handles it as expected. In IE8 when window size small enough so div B wraps under div A – div B not taking all available width but only have its min-width. The question is: is that a bug, or standard behavior? If this is a bug, how can we work around it?

I have a test case here: http://jsfiddle.net/BJM4s/2/ , resize the window to see it in action.

HTML:

<div class="parent">
    <div class="A">
        <img src="http://placekitten.com/g/100/100  " />                                                     
    </div>
    <div class="B">
       float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float
     </div>
 </div>​

CSS:

.parent {
    overflow:hidden;
    margin: 20px;
    border: 1px solid;
}


.A {
    float:left;
    margin-right: 10px;
}
.B {
    overflow:hidden;
    min-width: 200px;
    background: lime;
}​

Answer 1

It seems that adding display: table-cell to .B makes it behave. I did not fully test in all other browsers to see if it would cause an issue. It might be best to just have it set for IE8 (though it did not seem to affect IE7/9 or Firefox).