Making child wider than its parent without width

You can set display:inline and white-space:nowrap on your #child, which will give you the results you're desiring. The container will only be as wide as the content within, and will exceed the width of the parent if necessary.

Demo: http://jsbin.com/ebuxup/edit#html,live

Try with this CSS to avoid line break at all #child { white-space: nowrap; }.