Si nous avons une div A flottante et une div B avec overflow : hidden à côté, la div B devrait prendre tout l'espace disponible à côté de la div flottante. Et si la largeur minimale de la div B est définie et que la taille de la fenêtre est trop petite pour que ces deux divs restent sur la même ligne, la div B doit s'enrouler sous la div A et prendre toute la largeur disponible du parent. Ce comportement exact peut être observé dans tous les principaux navigateurs, à l'exception d'IE8, même IE7 le gère comme prévu. Dans IE8, lorsque la taille de la fenêtre est suffisamment petite pour que le div B s'enroule sous le div A, le div B ne prend pas toute la largeur disponible, mais n'a que sa largeur minimale. La question est de savoir s'il s'agit d'un bogue ou d'un comportement standard. S'il s'agit d'un bogue, comment pouvons-nous le contourner ?
J'ai ici un cas d'essai : http://jsfiddle.net/BJM4s/2/ Pour le voir à l'œuvre, redimensionnez la fenêtre.
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;
}
