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

Here's what I have, and it works:

#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;
}