Re: [csswg-drafts] [css-overflow-4] overflow into the gutter (#5253)

```html
<div>abcde</div>
```
```css
div {
  font-size: 16px
  font-family: monospace;
  width: 4ch;
  overflow: auto;
  scrollbar-gutter: stable;
}
```
Assume with that particular font that 1ch = 8px, which is narrower than the typical 16px width of a scrollbar and its gutter. "abcd" fit within the element's content area, and "e" overflows to the right. with classic scrollbars and `scrollbar-gutter: stable`, that means into the (empty) 16px gutter.

Do we get a horizontal scrollbar? What about if we had [`scrollbar-gutter: always`](https://drafts.csswg.org/css-overflow-4/#valdef-scrollbar-gutter-always) instead of `stable`?

<table>
<thead>
<tr><th rowspan=2><th colspan=2>Classic scrollbars<th colspan=2>Overlay scrollbars
<tr><th>stable<th>always<th>stable<th>always
<tbody>
<tr><th>option 1<td colspan=2>no scrollbar *<td rowspan=3>scrollbar †<td>no scrollbar
<tr><th>option 2<td colspan=2 rowspan=2>scrollbar<td>scrollbar
<tr><th>option 3<td>no scrollbar
</table>

 * not web compatible, unless we make a difference between the case where there is a visible scrollbar in the gutter or not
 † because the overflow goes beyond the 0-width gutter

I think we should do 3. Note that the difference between 2 and 3 only becomes apparent if we have the `always` value, which is proposed in level 4 but not 3.

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


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

Received on Thursday, 18 January 2024 06:28:26 UTC