css - firefox not responding to float with overflow:hidden -

css - firefox not responding to float with overflow:hidden -

i have floated image text on right side. want set min-width on text, when browser resized, text squeezes width. after should move under picture. works in chrome not in firefox. not want utilize mediaqueries. firefox works if set width property not want. give thanks help.

code

<div class="wrapper"> <ul> <li> <div class="image"></div> <div class="info">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> </li> </ul> </div>

css

.wrapper { width:100% } .image { height:100px; width:50px; margin:10px; border:1px solid; float:left } .info { min-width:200px; overflow:hidden; }

jsfiddle http://jsfiddle.net/b4ffoayh/7/

i wish know why, add together code follows seems working.

li { display:inline-block; /*or inline-table*/ }

updated demo: http://jsfiddle.net/bt0c252z/

css firefox css-float