小编kew*_*ing的帖子

如何生成如下所示的代码:

我正在使用带有 CellMeasurer 的 react-virtualized WindowScroller 来滚动 100 个样本记录，并且它本身效果很好。

现在，当我将此组件放置在其上方和下方具有冻结页眉和页脚（使用 flex）的内容窗格中时，react-virtualized 不会引入除第一页之外的其他数据。

我的容器页面的结构与 create-react-app 模板相同：

<div className="App">
    <div className="App-header" />
    <div className="App-intro" />
    <div className="App-footer" />
</div>

这是我用来冻结页眉和页脚的 CSS：

html, body, #root {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.App {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.App-header, .App-footer {
    flex-shrink: 0;
}
.App-intro {
    flex-grow: 1;
    overflow-y: auto;
}

FWIW，官方的 WindowScroller 示例使用 flex 完成了一个冻结的标题，但尽我所能，我无法复制它。

在花了一整天的时间之后，我的智慧已经结束了。我真的很感激任何让这个 flex 布局与功能性窗口滚动条一起使用的指针。