Re: [csswg-drafts] [css-overflow-3] Clarify padding in overflow content (#129)

@dholbert - Getting there. We successfully shipped adding inline-end padding to blocks which *already* scrolled. E.g.

```
<!DOCTYPE html>
<div style="overflow: scroll; padding: 10px; border: solid; width: 100px; height: 100px;">
  <div style="width: 100px; height: 100px; background: lime;"></div>
</div>
```
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=9874

We are still determining if we can add this inline-end padding universally. There is one interesting subcase which is highly prevalent:
```
<!DOCTYPE html>
<div style="overflow: scroll; padding: 10px; border: solid; width: 100px; height: 100px;">
  <div style="width: 100px; height: 0; background: lime;"></div>
</div>
```
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=9875

Specifically if there appears to be one JS library which uses this pattern (an zero height element which would trigger overflow if we added padding universally). I need to study this library some more to determine if making it scrollable will cause any issues for it.

The next step is likely going to be try to ship adding inline-end padding for the *non-empty* case. E.g.
```
<!DOCTYPE html>
<div style="overflow: scroll; display: block; padding: 10px; border: solid; width: 100px; height: 100px;">
  <div style="min-width: 90px; height: 100px; background: lime;"></div>
</div>
```
will be the same as
```
<!DOCTYPE html>
<div style="overflow: scroll; display: flex; padding: 10px; border: solid; width: 100px; height: 100px;">
  <div style="min-width: 90px; height: 100px; background: lime;"></div>
</div>
```

This is likely going to be web compatible as the UseCounter is lower than when we made the similar change for flexbox.

TL;DR at the very least we can add inline-end padding to block boxes which already scroll. But I'd like to keep pushing to try and add this universally.




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


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

Received on Tuesday, 7 December 2021 17:13:39 UTC