html - Floated div that fills remaining width of parent

Question

How can I have foo fill the remainder of the container's width if there is at least 50px remaining. If foo is > 50px it moves to a new line increasing the container's height. This question HTML/CSS: Expanding a float-left element to remaining width of parent is the same. I refuse to believe this can't be done without javascript. Come at me bro.

.container {
  width: 300px;
  min-height: 30px;
  overflow: auto;
}
.child {
  float: left
}
.foo {
  /* ? */
}

Answer 1

I fiddled something for you: http://jsfiddle.net/mac_cain13/K5fJP

The .foo div has a min-width to make sure it will go to the next line there is less then 50px available. The overflow: hidden; makes sure the div is not behind the .child div.

I added some JavaScript to demo the behavior when .child gets wider. Click the .child div to add some pixels to it's width. When the .child div takes so much space that there is less then 50px left the .foo div will jump to the next line.

Pure CSS, but only tested in Safari. :)