Avoid trimming an element when it is inside an overflow: hidden element

Question

I am using a CSS trick with equal heights as shown on this page .

Everything worked fine until today, when I need to add a dialog box inside one of the columns that is absolutely positioned to get it out of the stream. The problem is that since the container has an “overflow: hidden” on it, the dialog is interrupted when it overflows.

Besides casting a dialog outside a container element, is there any possible way to display it through CSS?

Here is a small example demonstrating what I mentioned.

<style> .container { overflow: hidden; margin-top: 30px } .col { float: left; padding-bottom: 2000px; margin-bottom: -2000px; border-right: 1px solid black; width: 100px; background-color: grey; } .col.third { border-right: none } #div-a { position: relative } #div-b { position: absolute; background-color: red; width: 35px; height: 350px; bottom: 0; right: 0; margin: 5px; border: 2px solid black; } </style> <div class="container"> <div class="col first"> <p style="height: 100px">One</p> </div> <div class="col second"> <p style="height: 300px">Two</p> <div id="div-a"> <!-- this gets cut off by the "overflow: hidden" on div.container --> <div id="div-b"> Foo </div> </div> </div> <div class="col third"> <p style="height: 200px">Three</p> </div> </div> 

You see that div#div-b disabled on top when it overflows in the div.container element.

Answer 1

Unfortunately, what you want to do is impossible without bringing the dialog outside the container element.

It is best to make the dialog element a child of the container and place it this way.

Answer 2

Unfortunately, no ... I don’t think there is a way around the overflow: hidden with an absolute position. You can experiment with the position: fixed, but you will not position under the same conditions if you use it.

Answer 3

One option is to place the contents of your overflow: a hidden container in a sub-container (possibly a child div). Then make the subcontainer compatible with the dimensions of the container and move the overflow: hidden from the container to the sub-container.

Then you can make the dialog box a child of the container (a child of the sub-container), and now it will exist in the element that DOES NOT have overflow: hidden.

I have not tested this, and overflow removal: hidden from the container may violate your design. If so, I would suggest doing the same as the others, and completely move the dialog outside the container. This can even be done using Javascript if you are unable to place the dialog box code elsewhere. (Javascript can make the dialog a child of BODY or another tag when you need it)