u

src/FillSpace.jsx

@@ -59,6 +59,7 @@ class FillSpace extends Component {
     if (
       prevProps.aboveRef !== this.props.aboveRef ||
       prevProps.belowRef !== this.props.belowRef ||
+      prevProps.containerRef !== this.props.containerRef ||
       prevProps.minHeight !== this.props.minHeight ||
       prevProps.maxHeight !== this.props.maxHeight ||
       prevProps.measureElement !== this.props.measureElement ||
@@ -98,9 +99,16 @@ 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 { aboveRef, belowRef, containerRef } = this.props;
+    const aboveList = Array.isArray(aboveRef) ? aboveRef : [aboveRef];
+    const belowList = Array.isArray(belowRef) ? belowRef : [belowRef];
+    const containerTarget = containerRef && 'current' in containerRef ? containerRef.current : containerRef;
+    const targets = [
+      ...aboveList.map((r) => (r && 'current' in r ? r.current : r)),
+      ...belowList.map((r) => (r && 'current' in r ? r.current : r)),
+      containerTarget,
+      this.contentRef,
+    ];
     for (const el of targets) {
       if (el && el.offsetParent !== null) {
         this.observer.observe(el);
@@ -108,11 +116,16 @@ class FillSpace extends Component {
     }
   }
 
+  measure = () => {
+    this._measure();
+  };
+
   _measure() {
     if (!this.ref) return;
 
     const {
       belowRef,
+      containerRef,
       measureElement,
       measureGap = 0,
       minHeight = 0,
@@ -136,7 +149,16 @@ class FillSpace extends Component {
       belowPx += Number.isFinite(marginTop) ? marginTop : 0;
     }
 
-    const available = Math.max(0, window.innerHeight - abovePx - belowPx);
+    const containerEl = containerRef && 'current' in containerRef ? containerRef.current : containerRef;
+    let available;
+    if (containerEl && typeof containerEl.getBoundingClientRect === 'function') {
+      const cRect = containerEl.getBoundingClientRect();
+      const paddingBottom = parseFloat(window.getComputedStyle(containerEl).paddingBottom) || 0;
+      available = Math.max(0, cRect.bottom - rect.top - belowPx - paddingBottom);
+    } else {
+      available = Math.max(0, window.innerHeight - abovePx - belowPx);
+    }
+
     const clamped = Math.min(
       Math.max(available, minHeight),
       maxHeight ?? Infinity,
@@ -264,7 +286,7 @@ class FillSpace extends Component {
               ref={(el) => {
                 this.contentRef = el;
               }}
-              sx={{ width: '100%' }}
+              sx={{ width: '100%', ...(measureElement == null ? { height: '100%' } : {}) }}
             >
               {children}
             </Box>