u

src/FillSpace.jsx

@@ -121,6 +121,9 @@ class FillSpace extends Component {
       prevProps.items !== this.props.items ||
       prevProps.header !== this.props.header
     ) {
+      if (this.state.unitHeight <= 0) {
+        this._probeMeasure();
+      }
       this._observe();
       this._viewportMeasure();
     }
@@ -361,7 +364,14 @@ class FillSpace extends Component {
     }
     const minSize = Math.max(1, Number(minPageSize) || 10);
     const maxSize = Number(this.props.maxPageSize) > 0 ? Number(this.props.maxPageSize) : Infinity;
-    const { unitHeight } = this.state;
+    let { unitHeight } = this.state;
+    if (unitHeight <= 0) {
+      const firstRow = this.ref?.querySelector('[data-fill-row]');
+      const h = this.probeRef?.offsetHeight || firstRow?.offsetHeight;
+      if (h > 0) {
+        unitHeight = h;
+      }
+    }
     const calculated =
       unitHeight > 0 ? Math.max(minSize, Math.floor(available / unitHeight)) : minSize;
     const nextPageSize = Math.min(maxSize, calculated);
@@ -369,11 +379,18 @@ class FillSpace extends Component {
       Number.isFinite(maxSize) && unitHeight > 0
         ? Math.min(available, nextPageSize * unitHeight)
         : available;
-    if (
-      nextViewportHeight !== this.state.viewportHeight ||
-      nextPageSize !== this.state.pageSize
-    ) {
-      this.setState({ viewportHeight: nextViewportHeight, pageSize: nextPageSize });
+    const updates = {};
+    if (nextViewportHeight !== this.state.viewportHeight) {
+      updates.viewportHeight = nextViewportHeight;
+    }
+    if (nextPageSize !== this.state.pageSize) {
+      updates.pageSize = nextPageSize;
+    }
+    if (unitHeight > 0 && unitHeight !== this.state.unitHeight) {
+      updates.unitHeight = unitHeight;
+    }
+    if (Object.keys(updates).length > 0) {
+      this.setState(updates);
     }
   }