How to add vertical scrollbar to sliding tab?

Question

I have a sliding tab implementation on http://thehungrygeek.com/ - i.e. the sliding drawer on the right side of the screen.

How do I add a vertical scrollbar to the sliding drawer using CSS that only appears when the visitor's display screen height is too small such that it cuts off part of the sliding drawer?

I have tried the following CSS code:

#tab_slide {
overflow-x: auto;
overflow-y: scroll
height:auto;       // styles added by tab-slide plugin which I am using
top:5%;            // ---- || ----
right: -303px;     // ---- || ----
width: 300px;      // ---- || ----
}

With that code implementation, there is a vertical scroll bar but it does not scroll when the display height is smaller than the tab slide.

How do I get a workable vertical scrollbar that only appears when the tab slide can't fit the available display?

Thanks for the help!

Answer 1

If I got you right then changing these lines from,

#tab_slide {
 overflow-x: auto;
 overflow-y: scroll
 height:auto;       // styles added by tab-slide plugin which I am using
 top:5%;            // ---- || ----
 right: -303px;     // ---- || ----
 width: 300px;      // ---- || ----
}

To :

#tab_slide {
overflow-x: auto;
overflow-y: scroll
height:100%;         // **note this lines
overflow-y : auto;    // **note this lines
top:5%;            
right: -303px;     
width: 300px;      
}

If the styles are added by plugin you might want to add '!important' to style values.