Overflow:scroll not working

Buddy, i check your website, the problem is not in the CSS File, the problem is in the jQuery plugin named isotope, the isotope inject this code:

   overflow: hidden;

as a style attribute at the .menu class, So you need to configure the plugin properly.

you can try, replacing this code:

$container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css'
});

For this code:

 $container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css',
    containerStyle: {
        position: 'relative',
        overflow: 'auto'
    }
});

Cheers!

One way you could deal with the problem is by setting height: 100% for div "tab-side-container", div "panel-container" and div "specials-tab". You'll also need to set "overflow:scroll" on "specials-tab". You may also need to set the "specials-tab" child div to height:100%.

That works for me in Chrome.

Basically, the content of the div has to exceed the size of the div in order for an overflow:scroll to work. Either make the content bigger or make the div smaller and see if that works for you. Also, "overflow:auto" on a div will set it to scroll only vertically, whereas "overflow:scroll" will set it to scroll both vertically and horizontally. Just a side note.

just change specials-tab height(less then 860px) and also give specials-tab to

overflow:scroll;

you can also set these properties to it's child if you want to scroll left and right div separately

please add to css property in your css

overflow-x: hidden;
overflow-y: scroll;

enter link description herealso check from here for website problem

Try this. Either #menu-content{overflow:auto} or #menu-content{overflow:scroll}

Working jsbin: (I cloned your site in jsbin to show example of it working)
http://jsbin.com/eWoXUHe/1

DETAILS:

Overflow scrolls automatically by default. however, if the div is not taller than the window (or containing div) height, then there is nothing to scroll, so it won't scroll. If you want to scroll anyway then just make the div taller than the window (or containing div) height.

From reviewing your website, I noticed immediately that .specials-tab is 1080px high. Because of this, that div extends far below the bottom of the page. You need to make this containing div smaller, for example 500px.

After you make that containing div height smaller, you can then scroll the inside content. You may also need to add overflow: scroll to the inner div (it will work once you made the outer div height smaller).

SOLUTION:

The following code will fix your site:

.specials-tab, #starters-tab, #specials-tab, #main-dishes-tab, #sides-tab, #sundries-tab, #drinks-tab, #desserts-tab {
  height: 300px !important;
  overflow: scroll !important;
}

NOTES:

• Don't use !important. Instead add height: 300px; overflow: scroll; manually to each of the above elements. I put !important so you could see it working in the jsbin.
• I put 300px just so it was small enough for you to see it working. However you can make this 500px or whatever pixel you want.

You could change your css to something like the below:

    #parent {
    overflow-y: scroll;
    width: 100%;
    }
    #box1 {
    width: 15%;
    float: left;
    }
    #box2 {
    width: 80%;
    float: right;
    }

I think this achieves what you're asking.