React virtualized WindowScroller is not rendering new rows if we have max-height to parent element. Below is the codesandbox link where the issue is reproduced.
https://codesandbox.io/s/react-virtualized-windowscroller-not-working-for-max-height-ribjod
import React from "react";
import { render } from "react-dom";
import { WindowScroller, List, AutoSizer } from "react-virtualized";
import "react-virtualized/styles.css";
const list = Array.from({ length: 100 }).map(
(_, index) => `list item ${index + 1}`
);
const rowRenderer = ({ index, style }) => (
<div key={index} style={style}>
{list[index]}
</div>
);
const App = () => {
return (
<div style={{ background: "yellow" }}>
<div style={{ background: "red" }}>Some content</div>
<div
class="windowScrollWrapper"
style={{ "maxHeight": "200px", overflow: "auto" }}
>
<WindowScroller className="windowScroller">
{({ height, onChildScroll, scrollTop }) => (
<AutoSizer className="AutoSizer" disableHeight={true}>
{({ width }) => {
return (
<List
autoHeight
height={height}
rowCount={list.length}
rowHeight={32}
rowRenderer={rowRenderer}
onScroll={onChildScroll}
scrollTop={scrollTop}
width={width}
/>
);
}}
</AutoSizer>
)}
</WindowScroller>
</div>
<div style={{}}>Some other content</div>
</div>
);
};
render(<App />, document.getElementById("root"));
