- 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. ![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