title: Getting Uncaught Error: Invalid offset NaN specified on React-virtualized when my width is smaller than my item size
body: <p>I'm using React-Virtualized (Autosizer + List) to render a collection of 1500+ cards. It works totally fine on desktop but when I resize the viewport to smaller than my card size (ie mobile with the menu open), I get <code>Uncaught Error: Invalid offset NaN specified</code> </p>
  
  <p>This is similar but different to these issues:
  <a href="https://github.com/bvaughn/react-virtualized/issues/461#issuecomment-259715859" rel="nofollow noreferrer">https://github.com/bvaughn/react-virtualized/issues/461#issuecomment-259715859</a>
  <a href="https://github.com/bvaughn/react-virtualized/issues/461" rel="nofollow noreferrer">https://github.com/bvaughn/react-virtualized/issues/461</a></p>
  
  <p>I've dug through the console logs and logged my values and I know I'm close to figuring it out but still no dice. Here is my code.</p>
  
  <pre><code>class PosesGrid extends React.Component {
    render() {
      const { poses, classes } = this.props;
  
      return (
        &lt;div style={{ height: "93vh" }}&gt;
          &lt;AutoSizer&gt;
            {({ height, width }) =&gt; {
              const itemsPerRow = Math.floor(width / ITEM_SIZE);
              const rowCount = Math.ceil(poses.length / itemsPerRow);
  
              if (width &lt; ITEM_SIZE) {
                const itemsPerRow = 1;
                const rowCount = poses.length; // my attempts around this
              }
  
              {
                /*  console.log(itemsPerRow);
              console.log(rowCount);*/
              }
  
              return (
                &lt;List
                  className="List"
                  width={width}
                  height={height}
                  rowCount={rowCount}
                  rowHeight={ITEM_SIZE}
                  rowRenderer={({ index, key, style }) =&gt; {
                    const items = [];
  
                    const fromIndex = index * itemsPerRow;
                    const toIndex = Math.min(
                      fromIndex + itemsPerRow,
                      poses.length
                    );
  
                    for (let i = fromIndex; i &lt; toIndex; i++) {
                      let pose = poses[i];
                      items.push(
                        &lt;div className={classes.Item} key={i}&gt;
                          &lt;PoseCard
                            pose={pose}
                            activeVideo={this.props.activeVideo}
                            toggleVideoModal={this.props.toggleVideoModal}
                            favorites={this.props.favorites}
                            user={this.props.user}
                          /&gt;
                        &lt;/div&gt;
                      );
                    }
  
                    return (
                      &lt;div className={classes.Row} key={key} style={style}&gt;
                        {items}
                      &lt;/div&gt;
                    );
                  }}
                /&gt;
              );
            }}
          &lt;/AutoSizer&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dQnVM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dQnVM.png" alt="enter image description here"></a></p>
  
  <p>Any ideas on how to make this mobile friendly?</p>