CSS Overflow - Not working as expected

Question

http://jsfiddle.net/bSnaG/

In my mind the above example should look like a grey box with #x not going past the edge and #y poking out the b

Answer 1

#y can't break out of its bounding box without being taken out of the flow of the document. Does adding position: absolute; to #y give the effect you're after?

Update

Restructured HTML example, including a containing box to allow everything to be easily positioned together. Try it out here: http://jsfiddle.net/GfNbp

    

        

    
    




#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 */
}