Set the children to the width of the content, ignore the width of the parent and create a parent scroll

Question

Only with CSS can the following example be obtained: http://jsfiddle.net/LdJ7t/ , without explanation, knowing the width of the child in front of the hand?

Final result:

• parent scrollable by child
• child width set for content

#Parent { width: 100px; height:200px; background: #ccc; overflow:auto; padding: .5em; margin: .5em; } #Child { width:300px; height:100px; background:yellow; }​ <div id="Parent"> <div id="Child"> This is a test. This is a test. </div> </div>​ 

It looks like display:inline-block; almost works: http://jsfiddle.net/LdJ7t/1/

I think it's possible. I just can't find a solution.

Answer 1

Your inline-block solution is correct - if you insert longer words or an image, a scroll bar will appear. The default text is split into spaces.

If you do not want to break the text into spaces, you can add white-space: nowrap; in a child div, like here: http://jsfiddle.net/LdJ7t/2/