u

src/FillSpace.jsx

@@ -98,9 +98,14 @@ class FillSpace extends Component {
 
     // Only observe the referenced elements + the rendered content — never the
     // spacer's own parent, since resizing the spacer would resize the parent
-    // and create a loop.
     const { aboveRef, belowRef } = this.props;
-    const targets = [aboveRef?.current, belowRef?.current, this.contentRef];
+    const aboveList = Array.isArray(aboveRef) ? aboveRef : [aboveRef];
+    const belowList = Array.isArray(belowRef) ? belowRef : [belowRef];
+    const targets = [
+      ...aboveList.map((r) => (r && 'current' in r ? r.current : r)),
+      ...belowList.map((r) => (r && 'current' in r ? r.current : r)),
+      this.contentRef,
+    ];
     for (const el of targets) {
       if (el && el.offsetParent !== null) {
         this.observer.observe(el);
@@ -108,6 +113,10 @@ class FillSpace extends Component {
     }
   }
 
+  measure = () => {
+    this._measure();
+  };
+
   _measure() {
     if (!this.ref) return;
 
@@ -264,7 +273,7 @@ class FillSpace extends Component {
               ref={(el) => {
                 this.contentRef = el;
               }}
-              sx={{ width: '100%' }}
+              sx={{ width: '100%', ...(measureElement == null ? { height: '100%' } : {}) }}
             >
               {children}
             </Box>