On a web page, how can i have a scroll bar just for a certain section?

Question

On the back of getting this question answered, I have a page that looks like this.

 <div style="white-space: nowrap;">
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
 </div>

This page if there are a lot of spans will not wrap and it will keep going horizontally on the page and give me a horizontal scroll bar. Inside each span i have a html table but i am not sure that is important for question.

This works well but i have an issue when one of the spans is really long vertically and the others are short because you have to scroll down vertically to actually see that you have the horizontal scroll bar. I am trying to figure out a way to solve this so the horizontal scroll bar is always visible on the page regardless of how vertically long a particular span section is.

As an example, if you take alook at trello (see screenshot below). If you have a really long section vertically it add a vertical scroll bar JUST on that section, so the whole page doesn't need to be scrolled down.

In my case inside each span is a html table. What is the recommended way of implementing a vertical scroll bar just for that table (and not the whole page)?

Answer 1

You need a max-height and overflow-y on the interior elements, and you need to set sizes on the outer elements:

HTML

<div class="outer">
    <div class="inner">foo</div>
    <div class="inner">bar</div>
    <div class="inner">whatever</div>
</div>

CSS

.outer {
    border: 2px solid red;
    float:left;
    top:0;
    bottom:0;
    position:absolute;
}
.inner {
    max-height:100%;
    overflow-y:auto;
    border: 2px solid blue;
    width:30%;
    margin-right:2%;
    float:left;
}

Here's a working fiddle

Answer 2

body, html {height: 100%}

.what_wraps_your_span {overflow-y: scroll; max-height: 100%;}