twitter/bootstrap — Issue #2321: Scroll container to prevent elements growing too wide
Author: r1ch0
Created: 2012-02-28 23:39:41+00:00
State: open

I tried putting a `table` inside a `.span#` but found that depending on the data inside the table, it could outgrow the parent `.span#` and overlay the content to the right. The problem can be solved by wrapping the `table` in a `div` with `overflow-x: auto` set.

I propose that a scroll container `div` is added to apply scrolling to child elements when their size is too big for the parent and when wrapping is not applicable. I'd suggest something like:

```css
.scroll {
overflow: auto;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}
```

unless someone else can come up with a better name of course! This style could be applied directly to a `.span#` element if you want *all* of its content to scroll. (In my case, it'd only be the `table` that I want scrolling and not the `h1` above it.)

Alternatively, if there's a way to make `table`s work better inside `.span#`s, then that might be better. I just can't think of anything right now.