In my mind the above example should look like a grey box with #x not going past the edge and #y poking out the bottom.
But it's not like that - apparently setting overflow-x: hidden; causes overflow-y: scroll | auto;.
Is there any way around this?
I need to allow certain elements to escape the bounding box without setting overflow: visible on #box.
3 Answers
#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:
<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 */
}
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;
}
I think the problem is your height: 100px in the outer div. If you remove this height attribute, do you get the result you're looking for?
Otherwise, I think batwad's probably knocked the nail on the head using three divs.
