Why is my react-virtualized list not displaying scrollbar unless I make sure height is lower than rowCount*rowHeight?

Question

I am using "react-virtualized": "9.22.5", and I am trying to render a list.

When I pass

<List
  height={myList.length * 30}
  rowHeight={30}
  rowCount={myList.length}
  width={240}
  style={{maxHeight: 657}}
  rowRenderer={({ index, key, style }) => {...}
/>

I get only the first 21 items, even if myList is longer. This means that I do not get scrollbar, and that the rest of the items are not visible. If I use instead rowCount={myList.length + 1}, it magically counts the rows correctly and I get my scrollbar. Alternatively, setting height={myList.length*30 - 0.001} will also work.

console.log(myList.length) shows the correct length.

What is going on?

Answer 1

Turns out, that List doesn't know what its maxHeight is - it "thinks" that it is displayed at full height. And since height is just as big as rowCount requires, no scrollbar is displayed. To display scollbar, height must be less than rowCount*rowHeight, regardless of other styles.

My solution was to write List without the maxHeight, but otherwise I would have used the -0.001 hack.