I am trying to add the AutoSizer but keep getting height and width of 0px.
I add the AutoSizer like this:
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>
);
The resulting 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>
The logs give me:
width: 400 height: 200
If I edit the html of the 0px box in the browser and scroll my box, which by state change then is supposed increases its height, nothing happens. It stays on its manually modified size even if the new height value is being logged to the console.