Question

With CSS alone, is it possible to obtain the following example, http://jsfiddle.net/LdJ7t/, without explicity knowing the child element’s width before hand?

The final result desired:

• parent element scrollable to child element
• child element’s width set to 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 this is possible. I just can’t find a solution.

Answer 1

Your inline-block solution is correct – if you put longer words in or an image, the scrollbar will appear. Text is broken on white space by default.

If you don’t want text breaking on white space, you can add white-space: nowrap; to the child div like here: http://jsfiddle.net/LdJ7t/2/