[csswg-drafts] [css-overflow] spec text for scrollable end-edge padding needs clarification (#6315)

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

== [css-overflow] spec text for scrollable end-edge padding needs clarification  ==
In https://drafts.csswg.org/css-overflow-3/#scrollable , the first bullet-point ("the box’s own content and padding areas") and the fifth bullet-point ("padding on the end-edge side...") need some clarification.

It's not clear to me which of those two bullet points is intended to be responsible for the final 30px of padding creating the scrollable overflow in this example (markup below at [1]):
https://jsfiddle.net/dholbert/w40undve/

Also, the fifth bullet-point needs some clarification about what the padding is added to.  Right now it says "Padding on the end-edge sides of the scrollable overflow rectangle representing the end-side padding applied to the scroll container" .  I'm not sure precisely what this bullet-point is calling for, but it sounds a bit like it's asking for us to first determine the scrollable overflow rect per earlier bullet points (including e.g. out-of-flow children that we serve as the CB for, and super-tall grandchildren), **and then add the container's end-edge padding to that scrollable overflow**.  That's not what implementations actually do, though, as shown by this example:
https://jsfiddle.net/dholbert/3vk9nj16/
(the same as my earlier fiddle except that I've added `position:absolute` to the flex item, basically).

In this second example, the padding does *not* get added to the overflow area created by the abspos descendant, in Gecko or Chromium or WebKit.  So I think we need to be sure to phrase that fifth bullet point such that it doesn't sound like it's calling for that.

[1] Markup for my first jsfiddle above:
```css
.flex {
  display: flex;
  height: 100px;
  width: 100px;
  padding-right: 30px;
  padding-bottom: 30px;
  border: 3px solid black;
  background: lime;
  overflow: auto;
}
.item {
  height: 150px;
  width: 150px;
  flex: none;
  background: teal;
}
```
```html
<div class="flex">
<div class="item">
</div>
</div>
```

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


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

Received on Wednesday, 26 May 2021 23:32:30 UTC