在我看来,上面的例子应该看起来像一个灰色的盒子,#x不会越过边缘而#y戳出底部.
但它不是那样 – 显然设置overflow-x：hidden;导致溢出-y：滚动|汽车;.
最佳答案
#y不会在没有从文档流中取出的情况下突破其边界框.添加位置：绝对; #y给你效果你想要的？
更新
重构的HTML示例,包括一个包含框,允许所有内容轻松放置在一起.在这里尝试：http://jsfiddle.net/GfNbp
Box">
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 */
}
