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,12 +99,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
-    const { aboveRef, belowRef } = this.props;
+    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) {
@@ -122,6 +125,7 @@ class FillSpace extends Component {
 
     const {
       belowRef,
+      containerRef,
       measureElement,
       measureGap = 0,
       minHeight = 0,
@@ -145,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,