I have a child element with overflow:visible;
and the parent element with overflow:hidden;
. The child element has height higher than the parent element.
Why the child element is hidden if has the property overflow set to visible?
HTML:
<div id="container">
<div id="makeThisVisible"></div>
<div id="thisRemainsHidden"></div>
</div>
CSS:
#container {
width: 500px;
height: 100px;
border: 1px solid black;
background: Gray;
/*OVERFLOW*/
overflow: hidden;
}
#makeThisVisible {
width: 240px;
height: 300px;
float: left;
border: 1px solid red;
background: IndianRed;
/*OVERFLOW*/
overflow: visible;
margin-left: 8px;
}
#thisRemainsHidden {
width: 240px;
height: 300px;
float: left;
border: 1px solid teal;
background: DarkCyan;
}
The fiddle: http://jsfiddle.net/ewNbu/
To resolve this issue i don't want to use visibility property for #container
or position:absolute property for #makeThisVisible
, but I want to find another better way to solve the problem.
Please help! Thank you so much.
We have a dropdown-menu that gets filled with suggestions when the user type (type 'c' in the search field to see). This dropdown-menu is currently hidden behind the menubar, because it has "overflow hidden". We can break out, if we remove the top:100% and set position to fixed .
hidden - The overflow is clipped, and the rest of the content will be invisible. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content. auto - Similar to scroll , but it adds scrollbars only when necessary.
You can try playing with:
position:absolute;
which breaks the child out of the scope of the parent element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With