AutoSizer创建大小为0的框，并且不显示内容

我正在尝试添加AutoSizer，但始终获得0px的高度和宽度。

我这样添加AutoSizer：

    console.log("width: " + width, "height: " + height);

    return (
        <div style={{height: '300px'}}>
        <AutoSizer>
            {({ width, height }) => (
                <VirtualScroll
                    ref="VirtualScroll"
                    width={width}
                    height={height}
                    rowCount={months.length}
                    rowHeight={this.getMonthHeight}
                    estimatedRowSize={rowHeight * 5}
                    rowRenderer={this.renderMonth}
                    onScroll={onScroll}
                    scrollTop={this._initScrollTop}
                    className={classNames(style.root, {[style.scrolling]: isScrolling})}
                    style={{lineHeight: `${rowHeight}px`}}
                    overscanRowCount={overscanMonthCount}
                />
            )}
        </AutoSizer>
        </div>
    );

产生的html：

<div class="Cal__Container__listWrapper">
  <div style="height: 300px; position: relative;">
    <div style="overflow: visible; height: 0px; width: 0px;">
      <div aria-label="grid" class="Grid VirtualScroll Cal__List__root" role="grid" tabindex="0" style="line-height: 40px; height: 300px; width: 400px; overflow-x: hidden; overflow-y: auto;">
        ...
      </div>
    </div>
  </div>

日志给我：

宽度：400高度：200

如果我在浏览器中编辑0px框的html并滚动我的框（通过状态更改，那应该会增加其高度），则不会发生任何事情。即使将新的高度值记录到控制台，它也保持其手动修改的大小。