[csswg-drafts] Make child visible outside of `overflow: hidden` (#4092)

OliverJAsh has just created a new issue for https://github.com/w3c/csswg-drafts:

== Make child visible outside of `overflow: hidden` ==
#### 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.

![image](https://user-images.githubusercontent.com/921609/60833958-6198c600-a1b7-11e9-8d4a-24695302139a.png)

This modal element contains has 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:

<img src="https://user-images.githubusercontent.com/921609/60832926-06fe6a80-a1b5-11e9-8c03-e1814240805a.png" width="500" />

Here is a reduced test case:

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

What we want:

<img src="https://user-images.githubusercontent.com/921609/60832754-8e97a980-a1b4-11e9-9009-e0703a21e008.png" width="300" />

What we have:

<img src="https://user-images.githubusercontent.com/921609/60832768-99ead500-a1b4-11e9-9491-0d67d22714e6.png" width="300" />

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.

#### 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:

- https://github.com/w3c/csswg-drafts/issues/865
- https://github.com/w3c/csswg-drafts/issues/3417

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4092 using your GitHub account

Received on Monday, 8 July 2019 18:34:58 UTC