overflow-x refusing to show?

Problem

I am working on a site and I cant manage to get the overflow-x to scroll when the window is shrunk down (emulating a tablet/mobile).

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: auto;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: auto;
}

Is all I can think of that would be controlling this. You can view the site HERE.

Thank you in advance for any suggestions.

Problem courtesy of: matt

Solution

You have a min-width set on your #wrapper div, which technically means it will never have any overflowing content.

Set the CSS for the wrapper to the following:

#wrapper {
    margin: 0 auto;
    max-width: 2560px;
    min-width: 900px;
    overflow-x: auto;
    padding: 0;
    position: relative;
    width: 100%;
}

And remove the overflow properties from the CSS for the body & html elements, they are both unnecessary.

After making the above changes you should be able to scroll horizontally on mobile devices, the min-width value above will likely need changing though.

Solution courtesy of: Sean Dunwoody

Discussion

if you want to have element scroll able you should define width for it or it's parent .
so add min-width to your html style :

html {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow-x: auto;
   min-width: 1000px;  # this is when html will be scroll-x
}
Discussion courtesy of: Mb Rostami

This recipe can be found in it's original form on Stack Over Flow.