Have Fomantic-UI (Angular-JS) sidebar scoll indipendantly

Question

Is there a method to get a sidebar to scroll indipendently from the content it pushes?

Right now I have a page set up in this fasion:

--------------------------
|[button]  Header        |
--------------------------
|S | Main content        |
|i |                     |
|d |                     |
|e |                     |
|b |                     |
|a |                     |
|r |                     |
--------------------------
| Footer                 |
--------------------------

The button I have in the header toggles the sidebar and when it's visible it will scroll along with the Main Content of the page. I would like to keep this from happening, so if anyone can tell what I have to do it would be appreciated.

Below is the basic structure of my HTML (I can't post acttual code so please forgive me)

<div class="ui segment pushable" style="margin-top:3.5em;" id="mainContent">
   <div class="ui inverted labeled icon left inline vertical sidebar menu" id="individual_messages_sidebar">
      <!-- side bar content here -->
   </div>
   <div class="pusher">
      <!-- Main Content -->
   </div>
</div>

The code that initializes the sidebar in Javascript

$('#individual_messages_sidebar')
   .sidebar({
      context: $('#mainContent')
   })
   .sidebar('setting', 'dimPage', false);

I've tried making the side bar and/or the main content sticky. Tried giving them fixed positions with CSS. Maybe some other things that I can't remmember, but nothing has really worked as I had hoped.

Answer 1

overflow is what determines if you will have scroll bars. you need a container that has a known height and inside you can have an element that has massive height and use overflow to control it. Example

.slider {
  height:100%;
  overflow:auto;
}
.slider>div {
  background: #cddccd;
  width:130px;
  height:1000px;
}
.content {
  height:100%;
  overflow:auto;
  width:100%;
}
.content>div {
  background: #dccddc;
  width:100%;
  height:1000px;
}