CSS 溢出 - 未按预期工作

http://jsfiddle.net/bSnaG/ http://jsfiddle.net/bSnaG/

在我看来，上面的例子应该看起来像一个灰色的盒子#x不越过边缘并且#y探出底部。

但事实并非如此——显然是这样的overflow-x: hidden; causes overflow-y: scroll | auto;.

有没有办法解决？
我需要允许某些元素在不设置的情况下逃离边界框overflow: visible on #box.

#y如果不脱离文档流，就无法突破其边界框。是否添加position: absolute; to #y达到你想要的效果吗？

Update

重构的 HTML 示例，包括一个包含框，可以轻松地将所有内容放置在一起。在这里尝试一下：http://jsfiddle.net/GfNbp 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 */
}