react window with Autosizer

I got a problem when I used react-window with react-virtualized-auto-sizer, I made a little change of official example, then the list is disappear. I wonder why? Thank you for any help ~~

sandbox: https://codesandbox.io/s/bvaughn-react-window-fixed-size-list-vertical-forked-utczn?file=/index.js

when you delete the div node in the Examplecomponent, everything is ok.


Solution 1:

So the problem here is that the parent node, in that case, the <div> element, should have a height
Take a look at this, its working:

<div style={{display: "flex", flexGrow: 1, height: "100%"}}>
    <AutoSizer>
       // your code
    </AutoSizer>
</div>

There is an old issue about this, take a look:
https://github.com/bvaughn/react-virtualized/issues/570