I have some nested `<div>`s. The outer `<div>` has `overflow-x: scroll`, and the inner one has long text (that I don't want to wrap). The problem is that the "inner" `<div>`s don't actually expand into the scrolling area. For example, if I had a `click` event bound to each inner `<div>`, that event wouldn't fire if you scrolled to the right and clicked anywhere over there. In my sample, the red areas are part of the inner `<div>`s and the blue areas aren't (so a click anywhere in the blue areas wouldn't fire).

([fiddle](http://jsfiddle.net/tGkdn/))

Sample HTML:

```
<div class="outer">
    <div class="inner">one long element right here</div>
    <div class="inner">two long element right here</div>
    <div class="inner">three long element right here</div>
</div>

```

And some simple CSS:

```
.outer {
    width: 15ex;
    overflow-x: scroll;
    background-color: blue;
}

.inner {
    white-space: nowrap;
    background-color: red;
}

```

(colors are for illustrative purposes)