[csswg-drafts] [css-overflow-3] Reserved scroller space between content edge and padding edge (#11288)

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

== [css-overflow-3] Reserved scroller space between content edge and padding edge ==
The [CSS Overflow 3 spec, Section 4.1](https://www.w3.org/TR/css-overflow-3/#scrollbar-sizing) states:

> When reserving space for a scrollar placed at the edge of an element’s box, the reserved space is inserted between the inner border edge and the outer padding edge. 

Test:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      article {
        border: 10px solid red;
        width: 200px;
        height: 200px;
        position: relative;
        overflow: scroll;
        padding-right: 50px;
        
      }
      aside {
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <article>
      <aside>ASIDE</aside>
      <p>Text1</p>
      <p style="text-align: right;">Text2</p>
    </article>
  </body>
</html>
```

In Chrome DevTools, the scrollbar appears between the **content box edge** (inner edge) and the **padding box edge**, not between the **inner border edge** and **outer padding edge** as specified.

![scroller](https://github.com/user-attachments/assets/e2b5d030-deef-43f7-a89f-e3d00ffe71be)


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


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

Received on Thursday, 28 November 2024 09:48:07 UTC