There seems to be an issue with a child element having overflow:visible; while the parent element has overflow:hidden;. The height of the child element exceeds that of the parent element.
Why is the child element hidden even when its overflow property is set to visible?
HTML structure:
<div id="container">
<div id="makeThisVisible"></div>
<div id="thisRemainsHidden"></div>
</div>
CSS styling:
#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;
}
Access the fiddle for demonstration: http://jsfiddle.net/ewNbu/
I am seeking a solution without using the visibility property for #container or the position:absolute property for #makeThisVisible. Is there another approach to resolve this challenge effectively?
Your assistance is greatly appreciated. Thank you.