CSS overflow - not working properly

Question

http://jsfiddle.net/bSnaG/

In my opinion, the above example should look like a gray box with #x, not passing by the edge, and #ytearing out the bottom.

But this is not so. Apparently, the installation overflow-x: hidden;is causing overflow-y: scroll | auto;.

Is there any way around this?
I need to allow some elements to exit the bounding box without setting overflow: visibleto #box.

Answer 1

#ycannot break out of its bounding box without being torn out of the document flow. Does it add to position: absolute;the #yeffect that you are after?

Update

HTML-, , . : http://jsfiddle.net/GfNbp

<div id="container">
    <div id="box">
        <div id="x"></div>
    </div>
    <div id="y"></div>
</div>


#box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ededed;
    padding: 10px;

    /* ADD THE OVERFLOW */
    overflow-x: hidden;
    overflow-y: visible;
}

#container{
    position: absolute;
    top: 30px;
    left: 20px;
}

#x {
    width: 150px;
    height: 10px;
    background: #c1ffb2;
}

#y {
    width: 10px;
    height: 150px;
    background: #c4b2ff;
    position: absolute;
    left: 20px; /* margin+padding */
    top: 30px; /* margin+padding+x-height */
}

Answer 2

, :

#box {
    position:absolute;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ededed;
    padding: 10px;

    /* ADD THE OVERFLOW */
    overflow-y:visible;
    overflow-x:hidden;

}

#x {
    width: 150px;
    height: 10px;
    background: #c1ffb2;
}


#y {
    width: 10px;
    height: 150px;
    background: #c4b2ff;
    position: fixed;
}

Answer 3

I think the problem is your height: 100px in the outer div. If you remove this height attribute, will you get the result you are looking for?

Otherwise, I think batwad probably tapped his head with three divs.