How to make a child element visible if the parent is overflow:hidden?

css overflow

38,485

You can try playing with:

position:absolute;

which breaks the child out of the scope of the parent element.

DEMO

38,485

Mustapha Aoussar

Updated on July 17, 2020

Comments

Mustapha Aoussar almost 4 years
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.
- emerson.marini almost 11 years
  
  I think it's a bit obvious. If the parent is smaller and is set to hide when a child exceeds its size, that's what it's gonna happen.
- Bigood almost 11 years
  
  Note: overflow property describes how the content of the matched element will behave, not the element itself; as a result, overflow:visible; on #makeThisVisible won't change its behavior.
- Hashem Qolami over 10 years
  
  possible duplicate of Absolute position and Overflow:hidden
- mikep over 6 years
  
  It seems to be impossible. There should exists sth. new like ignore-parent-overflow: true :D
Bigood almost 11 years

OP Quote : "I don't want to use visibility property for #container or position:absolute property for #makeThisVisible"
user2276428 almost 11 years

@Bigood Ooops, missed that one, sorry. Well I think this might however be the only really easy way of doing this, and I don't see a problem with using it.
Bigood almost 11 years

Me neither, but the OP explicitly said he didn't want that solution, and is looking for an alternative...
Westy92 almost 9 years

This only works if the parent does not have position:relative.