I'm trying to create a container div with a series of styled divs inside it. I want the container to be a fixed width and show a scroll bar if any of the contained divs are wider than the container. I can do this by setting the container to auto overflow-x and nowrap whitespace but I can't seem to figure out how to get styles on the contained elements to stretch.
Here's an example of what I'm doing
<div style="width:200px;overflow-x:auto;white-space:nowrap"> <div style="background:#dddddd">AAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA</div> <div style="background:#aaaaaa">AAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAA</div> <div style="background:#bbbbbb;">AAAAAAAAAAAAA </div> </div>
And here's what I get
As you can see the scroll bar appears but the styles of the individual divs doesn't stretch. So when you scroll right to show the rest of the content the background stops.
I've tried playing around with widths and margins but can't seem to get the styles to stretch.