Horizontal overflow on VariableSizeGrid

Similar to https://github.com/bvaughn/react-window/issues/22. Except this time it’s for VariableSizeGrid. I’ve created a few examples to demonstrate.

Horizontal scrollbar appears on OSes with always visible scrollbars (e.g. Windows) once scrolled a bit: https://codesandbox.io/s/r55m5n027n

The same issue could be reproduced on other OSes (e.g. macOS) when using custom scrollbars via :-webkit-scrollbar: https://codesandbox.io/s/618026v83r

The only workaround I’ve found is to offset each column by scrollbar width: https://codesandbox.io/s/l2rqwyv989

Ofc then we have to know the scrollbar width beforehand either using a constant width when we have custom scrollbars or using some kind of width detection mechanism (calculating from elm.clientWidth - elm.offsetWidth). The latter sounds more ugly and could lead to jank when called to frequently. But then again, we would only need to calculate scrollbar width once in user’s session.

[bvaughn]

I don’t think this is the same as #22. I think grid is kind of behaving correctly in this case by adding the horizontal scroll bar. (Although I agree it’s weird that it only appears once you start to scroll. At least for me though, the Code Sandbox page you linked to itself also does the same thing with a horizontal scrollbar. I think this is kind of just a janky browser quirk.)

The same issue could be reproduced on other OSes (e.g. macOS) when using custom scrollbars via :-webkit-scrollbar:

Fair enough, although I’m not really interested in supporting custom scrollbars with this lib.

The only workaround I’ve found is to offset each column by scrollbar width:

If you definitely don’t want to have horizontal scrollbars, you could add style={{ overflowX: 'hidden' }} to the grid in question. But as I said, I think in this case it’s behavior correctly.

If you really want a non-horizontally scrolling grid, then it sounds like you actually want a list.

I’m going to close this issue because I think it reflects a misunderstanding but we can continue to talk on it if anything I’ve said in response seems incorrect! 😄

[bvaughn]

I have variable column count with fixed width

In this case, it sounds like VariableSizeGrid is the right choice for you then 👍but if your grid ends up having two columns, and each is 300 pixels wide, and your grid ends up being 600 pixels wide– then I believe the correct thing for VariableSizeGrid to do is to show both a vertical and horizontal scroll bar (as the Code Sandbox you linked to shows) 😄