Internet-Explorer-8 – IE8. Overflow hidden minimum width: Is this strange behavior solution?

 

  
 

 

 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
 

 
​

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

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

If we Already floating div A, and div B has overflow: hidden next to it-div B should occupy all the available space next to the floating div. If we set a minimum width on div B and the window size is too small to fit these two divs Stay on the same line-div B should wrap under div A and get all available widths of the parent. We can see this exact behavior in all major browsers except IE8, and even IE7 works as expected Deal with it. In IE8, the window size is small enough, so div B is wrapped under div A-div B does not occupy all available width but only its minimum width. The question is: is this a bug, or is it standard behavior? If this is an error, how can we solve it?

I have a test case here: http://jsfiddle.net/BJM4s/2/, adjust the window size to see its operation.

HTML:

 

  
 

 

 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
 

 
​

CSS:

< p>

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

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

It seems to add display: table-cell to .B makes it behave. I haven’t fully tested it in all other browsers to see if it causes problems. Setting it up for IE8 is probably the best (although it doesn’t seem to affect IE7/9 or Firefox ).