title: React Virtualized Masonry does not resize with the browser
body: <p>I am trying to build a feed (a Pinterest-like feed to put it straight). I am using <code>react-virtualized</code> Masonry component.</p>
  
  <p>You can see how the items rearrange and the component is correctly resized when the browser window resizes in <a href="https://youtu.be/yvKhHcUCxQQ" rel="nofollow noreferrer">this</a> screen recording.</p>
  
  <p>However, mine has a strange behavior as you can see in <a href="https://youtu.be/fdFKcjxNRZI" rel="nofollow noreferrer">this</a> screen recording.</p>
  
  <p>Here's the relevant excerpt of my code:</p>
  
  <pre><code>export default class Feed extends Component &lt;PropTypes, State&gt; {
    static readonly defaultProps = {
      enableInfiniteScroll: false,
      chunkSize: 9,
    };
  
    private _windowScroller: WindowScroller;
    private _masonry: Masonry;
    private _columnCount: number;
  
    private _cache: CellMeasurerCache;
    private _cellPositioner: Positioner;
  
    constructor(props: PropTypes) {
      super(props);
  
      // ...
  
      this._columnCount = 3;
  
      this._cache = new CellMeasurerCache({
        defaultWidth: COLUMN_WIDTH,
        defaultHeight: 400,
        fixedWidth: true,
      });
      this._cellPositioner = createMasonryCellPositioner({
        cellMeasurerCache: this._cache,
        columnCount: this._columnCount,
        columnWidth: COLUMN_WIDTH,
        spacer: GUTTER,
      });
    }
  
    onResize({width}: Size) {
      this._cache.clearAll();
      this.calculateColumnCount(width);
      this.resetCellPositioner();
      this._masonry.recomputeCellPositions();
    }
  
    cellRenderer(cellProps: MasonryCellProps) {
      const {items} = this.state;
      const listing = items.get(cellProps.index);
  
      return (
        &lt;CellMeasurer
          cache={this._cache}
          index={cellProps.index}
          key={cellProps.key}
          parent={cellProps.parent}
        &gt;
          &lt;div style={cellProps.style}&gt;
            &lt;ListingCard company={listing} /&gt;
          &lt;/div&gt;
        &lt;/CellMeasurer&gt;
      );
    }
  
    calculateColumnCount(width: number) {
      this._columnCount = Math.floor((width + GUTTER) / (COLUMN_WIDTH + GUTTER));
    }
  
    resetCellPositioner() {
      this._cellPositioner.reset({
        columnCount: this._columnCount,
        columnWidth: COLUMN_WIDTH,
        spacer: GUTTER,
      });
    }
  
    render() {
      const {items, isLoading, hasMore} = this.state;
  
      return (
        &lt;div className={Styles['listings-feed']}&gt;
          &lt;WindowScroller scrollElement={window} ref={this.setRef}&gt;
            {({height, isScrolling, onChildScroll, scrollTop, registerChild}) =&gt; (
              &lt;div className={Styles.windowScrollerContainer}&gt;
                &lt;AutoSizer disableHeight onResize={this.onResize}&gt;
                  {({width}) =&gt; (
                    &lt;div ref={registerChild as any}&gt;
                      &lt;Masonry
                        cellCount={items.size}
                        cellMeasurerCache={this._cache}
                        cellPositioner={this._cellPositioner}
                        cellRenderer={this.cellRenderer}
                        height={height}
                        width={width}
                        autoHeight
                        ref={(r: Masonry) =&gt; this._masonry = r}
                      /&gt;
                    &lt;/div&gt;
                  )}
                &lt;/AutoSizer&gt;
              &lt;/div&gt;
            )}
          &lt;/WindowScroller&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>