Re: [csswg-drafts] [css-overflow] How does overflow-clip-margin: border-box behave on a scroll container? (#7246)

> Personally, I am leaning to something like a keyword _(or maybe a new value?)_ for overflow, e.g. `overflow-y: scroll visible;`. Advantage to having a keyword is that you don’t need to know the specific height of any sibling element (e.g. the `<chat-header>` and `<chat-form>` in case of the chat UI).

I think it's simpler to have something like `overflow-clip-margin: infinite` represent this, while also being able to express a limited amount of overflow.

> @bramus I think there are two use cases outlined here. One of them is the chat messages example from @matthewferry, where the clip rect for the scrollable overflow is defined by layout (of an ancestor).

Thinking more about this, having an infinite clip margin implicitly makes the clip rect be the next nearest clip establishing ancestor. E.g.

```html
<style>
.chatbox {
  /* Actual clip of the overflow */
  overflow: clip;
}
.scroller {
  overflow: auto;
  /* Not clipped to scroller */
  overflow-clip-margin: infinite;
}
.header {
  /* Ensure header is above scroller overflow */
  position: relative;
  /* Glass effect over overflowing text */
  backdrop-filter: blur(5px);
}
</style>
<div class=chatbox>
  <div class=header></div>
  <div class=scroller></div>
  ...
</div>
```

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7246#issuecomment-2668898809 using your GitHub account


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

Received on Wednesday, 19 February 2025 14:57:08 UTC