Inner container height can't be set > 16777214

[bmingles]

When using FixedSizeList, the list container gets cut off if total height is > 16777214. In my particular use case, my items are 40px tall, and the list cuts off just after item 419431. This number changes if I adjust the item height.

This seems to be caused by a browser limitation on how large style.height can be set. Here's a minimal reproduction step showing that style.height cannot be set to a value greater than 16777214 (I'm currently using Chrome v111.0.5563.64)

var divEl = document.createElement('div')
document.body.append(divEl)

// Try setting `style.height` to different values
;[16777213, 16777214, 16777215].forEach(height => {
    console.log('----------------')

    console.log('set:', height)
    divEl.style.height = `${height}px`

    console.log('get:', divEl.clientHeight)
})

divEl.remove()

[bvaughn]

Can't really work around that browser limitation. Have tried (in react-virtualized) by artificially shrinking the "actual" height as you scroll to fit more items within the browser's upper bound but that can make scrolling feel pretty awkward and I don't want to port that to this library.

I know this is probably a bit controversial, but in my opinion– half a million items is too many to have in a scrolling list. It's bad UX. Scrolling isn't fine grained enough for such a large list.

In other words, I think this is an acceptable constraint for this library. Hope you understand!