overflow property with -x:hidden; and -y:visible

Question

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>

Related: http://stackoverflow.com/questions/10436452/overflow-x-hidden-also-hides-vertical-content-too — Juan Guerrero, Feb 20 '13 at 05:20
Also related: http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causes-scroll-bar — James Donnelly, Feb 20 '13 at 08:47

score 1 · Answer 1 · answered Feb 20 '13 at 14:29

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/

overflow property with -x:hidden; and -y:visible

1 Answers1