Make child visible outside an overflow:hidden parent

Question

In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children.

But it also has another interesting feature when combined with margin: auto...

If PREVIOUS sibling is a floating element, it will actually appear juxtapose to it. That is if the sibling is float:left then the container with float:none overflow:hidden will appear to the right of the sibling, no newline - just as if it was floating in the normal flow. If the previous sibling is float:right then the container will appear to the left of the sibling. Resizing this container will accurately show it centered inbetween the floating elements. Say if you have two previous siblings, one float:left the other float:right, the container will appear centered inbetween the two.

So here's the problem...

How do I maintain that type of layout WITHOUT masking children?

Googling all over the web gives me ways on how to clear:both and expand a container... but I can't find any alternative solution to maintaining the left/right previous-child centering. If you make the container overflow:visible then the container suddenly ignores the layout flow of the floating elements and appears layered ontop of the floating element.

So question:

I have to have the container overflow:hidden to preserve layout...

how can I make it so the children aren't masked? I need to have the child absolutely positioned relative to the parent outside the container.

OR

How do I overflow:visible so I can absolutely position a child relative to the parent outside the container... YET preserve the sibling float-like-layout-flow?

Solution 1

You can use the clearfix to do "layout preserving" the same way overflow: hidden does.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

add class="clearfix" class to the parent, and remove overflow: hidden;

Solution 2

Neither of the posted answers worked for me. Setting position: absolute for the child element did work however.

Solution 3

This is an old question but encountered it myself.

I have semi-solutions that work situational for the former question("Children visible in overflow:hidden parent")

If the parent div does not need to be position:relative, simply set the children styles to visibility:visible.

If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed. This worked for me in my situation luckily enough but I would imagine it wouldn't work in others.

Here is a crappy example just post into a html file to view.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

Solution 4

For others, if clearfix does not solve this for you, add margins to the non-floated sibling that is/are the same as the width(s) of the floated sibling(s).

View more solutions

Comments

[Thomas Davis]

Here is a crappy example just post into a html file to view. <code><div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;"> <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div></div> </div> </code>

[marknadal]

Thanks for trying to answer, but this doesn't work because fixed position automatically positions the element relative to the viewport, meaning it does not move with the parent. In fact, if you have a scrolling page, it'll stay at 10px,10px as you scroll.

[marknadal]

Hmm! Clever, I am just now experimenting with it. What I am currently getting is that the generated content behaves correctly, being preserved in the flow of the layout, however the parent will still ignore it and layer ontop of the floating elements. However, this is a very good idea and I will play with it more to see if I can get it to behave correctly, and comeback to vote. Thank you :).

[marknadal]

But wouldn't the parent DIV mask it out if it went beyond the boundaries of the parent DIV (which has overflow:hidden)?

[Pim Schaaf]

Afaik it doesn't, as long as the parent does not have position:relative. Then the child is positioned relative to its first positioned (not static) ancestor element, taking it out of the regular (parent's) dom flow.

[Frexuz]

@user1671639 your example doesn't really apply for a clearfix. You need something else, so I suggest you post a question with your problem.

[JackMorrissey]

"If the parent div does need to be position:relative, the only way possible I found to show the children was position:fixed." Thanks for that. I had a popover help bubble that needed to overflow even though the parent had overflow: scroll. I ended up having an absolute div, with a relative inner, and then a fixed content area.

[Felipe Castro]

Thanks, that worked for me. I had a parent with position relative, and that was needed because its position was set using left. Using margin-left instead would achieve the same effect, so I didn't need to use the position relative anymore.

[yeahlad]

If the parent does have position:relative and doesn't require it you can make it position:unset.

[ArneHugo]

True, if it's position: fixed or absolute positioned relative to something outside the parent that has visibility: hidden, it will be visible. However, you often need (want) to position it relative to the parent to be more robust to code changes. Then these solutions are not an alternative.

[Khom Nazid]

This doesn't work in the same way as overflow:hidden at all. Applying a clearfix to the parent div doesn't allow all child components to be "contained within" the same height as the parent.

[Fiddle Freak]

@marknadal this is exactly the problem I am having now which lead me to this so question

[Rajesh]

Yes, it worked! I guess this would be more clear for others .parent { overflow: hidden; } .child { overflow: overlay; height: 100vh; }