overflow property with -x:hidden; and -y:visible [duplicate] - html

Question

This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
Is it not possible to have the left and right side of an element as overflow:hidden, and the top and bottom as overflow-visible?
Once I add hidden to either overflow property, they both get cut off from the outer container.
I'm trying this but no luck: http://jsfiddle.net/dmGXY/
<div id="outer" style="overflow-x:hidden;overflow-y:visible;">
<div id="left"></div>
<div id="top"></div>
</div>
<style>
#left,#top {
position:absolute;
border:solid black 2px;
width:100px;
height:100px;
}
#left {
margin-left:-30px;
}
#top {
margin-left:100px;
margin-top:-30px;
}
#outer {
position:absolute;
top:70px;
left:100px;
width:300px;
height:200px;
border:solid 2px red;
}
</style>

Answer 1

You cant hide one and show the other however you can use another container as a "mask" to achieve the same effect
<div id="outer">
<div id="inner">
<div id="left"></div>
<div id="top"></div>
</div>
</div>
#left,#top {
position:absolute;
border:solid black 2px;
width:100px;
height:100px;
}
#left {
margin-left:-30px;
}
#top {
margin-left:100px;
margin-top:-30px;
}
#inner {
position:absolute;
top:70px;
left:0;
width:300px;
height:200px;
border:solid 2px red;
}
#outer {
position:absolute;
top:0;
left:100px;
width:304px;
height:100%;
border:solid 2px green;
overflow: hidden;
}
You can see the output here:
http://jsfiddle.net/LB2bg/