- From: Oliver Joseph Ash via GitHub <sysbot+gh@w3.org>
- Date: Mon, 08 Jul 2019 18:34:56 +0000
- To: public-css-archive@w3.org
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.  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