[SOLVED] overflow:hidden works for body but not for wrapper

overflow:hidden works for body but not for wrapper

I'm trying to assign overflow:hidden to the wrapper but it is ignored. It works however, if I assign it to body. Does anyone have an idea how to make it work for the wrapper?

The HTML...

<head>

<meta charset="utf-8">
<title>Overflow Test</title>

</head>

<body>

<div id="wrapper">

    <header></header>

    <main>

        <div id="content"></div>

    </main>

</div>

</body>

</html>

The CSS...

html    {
margin: 0;
padding: 0;
min-height: 100%;
    }
body    {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
    }
#wrapper {
overflow: hidden;
}
header  {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main    {   
width: 100%;
height: auto;
    }
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}

Help would me much appreciated...

Thanks

Solution

Ok, I got it to work by putting my wrapper inside another div with position:absolute and top and bottom set to 0. I took inspiration from Body set to overflow-y:hidden but page is still scrollable in Chrome

Here's the new fiddle... https://jsfiddle.net/aaandreas/esLcw3md/2/ Thanks for your effort turbopipp, I appreciate it!

Here's the updated HTML...

<body>

<div id="prewrapper">

<div id="wrapper">
        
    <header></header>
    
    <main>

        <div id="content"></div>
 
    </main>

</div>
    
</div>

And the updated CSS...

html    {
    margin: 0;
    padding: 0;
        }
body    {
    margin: 0;
    padding: 0;
        }
#prewrapper {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
    bottom: 0;
}
#wrapper {
    position: relative;
    margin: 0;
    padding: 0;
}
header  {
    position: fixed;
    top: 0xp;
    left: 0px;
    width: 100%;
    height: 50px;
    background-color: #d20000;
}
main    {   
    width: 100%;
    height: auto;
        }
#content {
    width: 100%;
    height: 3000px;
    background-color: #ffdd00;
}