[csswg-drafts] allow elements to escape the scroll container (#9107)

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

== allow elements to escape the scroll container ==
### Problem/motivation

Currently, if an element is made into a scroll container (e.g. using `overflow: auto` or `overflow: hidden`), then nothing inside it can "escape" out.

It is often desirable for some parts to be able to escape. Consider three examples:
- `box-shadow` often needs to protrude out of the container. Very common.
- `position: absolute` is often used to make elements protrude out or be anchored near one of the edges. One use case is nested scrollable sub menus, demonstrated in the css-tricks article ["Popping out of hidden overflow"](https://css-tricks.com/popping-hidden-overflow/).
- `transform` can be used to displace an element out of the container. Used in combination with `display: grid` (e.g. `place-self: end`), this is a great way to place decorative or functional elements near the corners of the containers.

In all of these examples, the element gets clipped if it tries to escape the scroll container.

### Ideas

There could be a simple way to make an element not be constrained by the scroll container.
```css
.scroll-container {
  overflow: auto;

  .escape {
    overflow-escape: x; /* or y or both */
  }
}
```

@daviddarnes suggested a more powerful idea, where an element could specify which scroll container it wants to (not) be constrained by.
```css
.scroll-container {
  overflow: auto;

  .escape {
    overflow-container: none;
  }
}
```
```css
.scroll-container {
  overflow: auto;
  container-name: one;

  .another-scroll-container {
    overflow: auto;
    container-name: two;

    .escape {
      overflow-container: one;
    }
  }
}
```

Another idea that might solve some use cases would be to allow individual elements to control their own version of `overflow-clip-margin`.
```css
.escape {
  /* will be clipped if it goes more than 20px outside than the scroll container */
  overflow-escape-margin: 20px;
}
```

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 24 July 2023 19:14:38 UTC