react-window 与下一个 13 布局

问：

我有一个带有新闻页面的应用程序，我想为它实现无限滚动。 我正在使用 next 13，并且我通过根布局设置了应用程序范围的导航和页脚。 我正在尝试使用 react-window 来有效地设置它，我希望让 react-window 滚动条的行为像默认滚动条一样，卡在右上角并跨越整个高度。

我的应用程序宽度限制为 1920px，之后是白条，页脚和页眉占用了一些高度空间。

我试过修补绝对位置和假容器 div，但我无法同时放置正确的滚动条和页脚。

我找不到任何例子来展示我想要实现的目标。要么 react-window 部分是全屏的，没有其他内容，要么页面上的其他内容没有在滚动条中考虑（它不是页面的全高）

这是我最近的一次尝试，但没有运气

function Wrapper({ hasNextPage, isNextPageLoading, items, loadNextPage }) {
  const itemCount = hasNextPage ? items.length + 1 : items.length;

  const loadMoreItems = isNextPageLoading ? () => {} : loadNextPage;

  const isItemLoaded = (index) => !hasNextPage || index < items.length;

  const Item = ({ index }) => {
    let content;
    if (!isItemLoaded(index)) {
      content = "Loading...";
    } else {
      content = items[index].name.first;
    }

    return <div className={styles.item}>{content}</div>;
  };
  const [size, setSize] = React.useState([0, 0]);

  React.useEffect(() => {
    setSize([window.innerWidth, window.innerHeight]);
  }, []);

  return (
    <div className={styles.container}>
      <InfiniteLoader
        isItemLoaded={isItemLoaded}
        itemCount={itemCount}
        loadMoreItems={loadMoreItems}
      >
        {({ onItemsRendered, ref }) => (
          <FixedSizeList
            itemCount={itemCount}
            onItemsRendered={onItemsRendered}
            ref={ref}
            height={size[1]}
            width={size[0]}
            itemSize={35}
          >
            {Item}
          </FixedSizeList>
        )}
      </InfiniteLoader>
    </div>
  );
}

css：

.container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.item {
  max-width: 1920px;
  margin: 0 auto;
}