Make child visible outside of `overflow: hidden`

[OliverJAsh]

Suggestion

A way to force a child element to appear visible outside of a hidden overflow container.

Example use case

I have a modal element with rounded borders. Because this modal contains an image, I need to use overflow: hidden in order to mask the image inside of the modal element's border—so the image doesn't overflow the modal element's border.

This modal element contains another child element which should be allowed to overflow this element—an input with an autocomplete list. Unfortunately however, the overflow: hidden prevents all children from overflowing, so the autocomplete list is clipped:

Here is a reduced test case:

https://jsbin.com/cuxabik/6/edit?html,css,output

What we want:

What we have:

I am not aware of any existing CSS features which solve this problem, but it's quite a common problem to have.

The autocomplete list could exist outside of the overflow container, but then you lose the ability to define its layout in terms of its parent.

Perhaps we could instruct the child element to appear visible outside of its overflow container:

.autocompleteList { container-overflow: visible; }

Related issues/articles

This problem has also been described here: https://css-tricks.com/popping-hidden-overflow/. (Their solution was to revert to JS for calculating layout.)

This problem is potentially related to:

• [css3 positioning] support position:sticky inside an overflow:hidden|auto on general parents #865
• [css-overflow] Selective overflow: hidden #3417

[AmeliaBR]

Thanks for the detailed use cases.

For the case where overflow: hidden is only used to trim the corners of an image, my first instinct is whether there could be another way to do this — a new clip-path value that references the parent's border box, maybe? That way, you're not hiding overflow unless you really want to hide content.

But that doesn't help with the case where you want to extend outside of a scrolling container, but still be positioned relative to an element inside that scroller.

[OliverJAsh]

a new clip-path value that references the parent's border box, maybe?

I love the sound of this.

[paulpopus]

In your particular example, isn't this solved by having a wrapper around the image and adding overflow: hidden to that and you can also add border-radius to it. Like so https://jsbin.com/lewacofiji/1/edit?html,css,output ?
The CSS tricks issue doesn't really seem related.

[scottjehl]

+1 I run into this constantly.

[OliverJAsh]

isn't this solved by having a wrapper around the image and adding overflow: hidden to that and you can also add border-radius to it

That does workaround the issue, but it feels like a hack, no? (Duplicating styles.)

Also, sometimes you don't know what content will appear inside ahead of time because it's dynamic. We just need to clip everything inside except "these" elements.

[gregwhitworth]

@domenic and others have begun discussing this to improve the controls/components story for this specific reason, here is the issue: whatwg/html#4633

I agree that this should live in CSS as it is effectively trying to bring the window focusing model that OSes have. As denoted in that thread I think there needs to be some research done as this is effectively trying to do z-index: top but magically to ensure it's the top thing since it's the most recently focused or notification type result. We'll need to define that behavior and what constitutes the winner of this top layer. That said, I'm supportive of us investigating this and making it happen as we'll need it for any popup scenario in controls.

[domenic]

Yeah. @tabatkins and I discussed some potential CSS properties that would make this work, but I'm hesitant to even write them up here, because I still think priority number one is research of the type outlined in whatwg/html#4633. Jumping to particular API proposals or solutions without having that grounding seems problematic to me, so I'm still really hoping to make some time to dig in to the questions listed there.

[bradkemper]

I think a z-index type of thing that effectively pushed the element out of its container would be the way to go and very useful.

For this particular use case, you can use border-top-left-radius: inherit on the image instead of clipping the parent, if you just want to round the corner to match.

[SelenIT]

Technically, CSS already has one possibility to do this: it's absolutely positioned elements whose containing block is outside the overflowed container. So another one possible solution regarding your example is to remove position: relative from the .content element.

However, it would be great if we can control this explicitly!

[OliverJAsh]

@SelenIT Copying your code comment here for reference:

/* the downside is that you can't use 100% of container width anymore */

The downside of doing this is you lose the ability to define the absolute element's size in terms of its parent, inside the overflow container.

[gregwhitworth]

@domenic completely agree. Added a few labels to denote that as such.

@OliverJAsh yeah, that's the goal :)