Re: [csswg-drafts] [css-overflow-4] scrollbar-gutter is too complex (#4674)

I hope this isn't adding noise to the discussion, but I wanted to pop in and say that `scrollbar-gutter` helped us to make a table with a sticky header where the width of the columns in the table's header are the same width as the columns in the table's body.

Table structure:

```test
|---------------------------------------|
|   header_col1       header_col2       |
|---------------------------------------|
|    body_col1         body_col2        |
|---------------------------------------|
|    body_col1         body_col2        |
|---------------------------------------|
|    body_col1         body_col2        |
|---------------------------------------|
```

HTML
```html
<div class="table">
   <div class="head">
      <div class="row">
         <div>col1</div>
         <div>col2</div>
      </div>
   </div>
   
   <div class="body">
      <div class="row">
         <div>col1</div>
         <div>col2</div>
      </div>
   </div>
</div>
```

CSS:

```CSS
.head, .body {
     display: flex;
     flex-direction: column;
}

.body {
     height: 200px;
     overflow-y: auto;
}

.row {
     display: flex;
}

.row > *:first-child {
     flex: 1;
}

.row > *:last-child {
     width: 100px;
}
```


Depending on how much content is inside `.body`, a scrollbar may or may not be shown. If the scrollbar is shown, then the first column ends up being wider in the header than it is in the body.

`scrollbar-gutter` fixed this:

```css
.body, .head {
     scrollbar-gutter: stable force;
}
```

What's not clear to me is how the browser knows to give `.head` a gutter for the vertical scrollbar but not for the horizontal scrollbar.

-- 
GitHub Notification of comment by Bosch-Eli-Black
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4674#issuecomment-803815043 using your GitHub account


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

Received on Monday, 22 March 2021 07:01:34 UTC