title: On a web page, how can i have a scroll bar just for a certain section?
body: <p>On the back of getting <a href="https://stackoverflow.com/questions/21159136/on-a-web-page-how-can-i-create-a-horizontal-scroll-instead-of-having-this-wap-t">this question</a> answered, I have a page that looks like this.</p>
  
  <pre><code> &lt;div style="white-space: nowrap;"&gt;
      &lt;span style="display: inline-block; width: 280px"&gt;...&lt;/span&gt;
      &lt;span style="display: inline-block; width: 280px"&gt;...&lt;/span&gt;
      &lt;span style="display: inline-block; width: 280px"&gt;...&lt;/span&gt;
      &lt;span style="display: inline-block; width: 280px"&gt;...&lt;/span&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.  </p>
  
  <p>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.</p>
  
  <p>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)?</p>
  
  <p><img src="https://i.stack.imgur.com/1zL4K.png" alt="enter image description here"></p>