From 21a30b95c3661f6c6f56fe246676ed89202d6798 Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Mon, 5 Oct 2026 10:33:24 +0200
Subject: [PATCH] u

---
 src/FillSpace.jsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/FillSpace.jsx b/src/FillSpace.jsx
index f15e8fe..d346383 100644
--- a/src/FillSpace.jsx
+++ b/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,