react-virtualized - AutoSizer はサイズ 0 のボックスを作成し、コンテンツを表示しません

Question

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 を編集してボックスをスクロールすると、状態の変化によって高さが増加すると想定されますが、何も起こりません。新しい高さの値がコンソールに記録されている場合でも、手動で変更されたサイズのままです。