React Virtualized Lists padded list items

Question

I'm trying have list items that have padding horizontally so that the scrollbar sits perfectly on the furthest right of the container. I've come with 3 less than ideal solutions, is there any other way to do this?

https://codesandbox.io/s/charming-maxwell-k6l6r?file=/src/App.js

The solutions I've come up with that aren't ideal are:

1. lifting the margin to an outer div (scroll bar is now not on the furthest right of container)
2. Containing the list item with another div (not ideal as we create another unnecessary DOM element around our component)
3. Overriding the style in the rowRenderer (the library forces the list item to take styles as a param and the width of that style is 100%. )

Answer 1

Found an answer after missing something in documentation.

Just add some padding in the style prop of List

<List
    style={{padding: '10px'}}
    height={height}
    width={width}
    rowCount={rowCount}
    rowHeight={rowHeight}
    rowRenderer={rowRenderer}
/>