diff --git a/src/components/ScrollArea.module.css b/src/components/ScrollArea.module.css
index e71bbb6..893412e 100644
--- a/src/components/ScrollArea.module.css
+++ b/src/components/ScrollArea.module.css
@@ -4,15 +4,16 @@
     min-width: 0;
     min-height: 0;
     overflow: hidden;
-    padding-inline-end: calc(var(--spacing) * 2);
-    padding-block-end: calc(var(--spacing) * 2);
     grid-template-columns: auto calc(var(--spacing) * 3);
     grid-template-rows: auto calc(var(--spacing) * 3);
+    gap: calc(var(--spacing) * 2);
     &.hide_thumb_y {
       grid-template-columns: auto 0;
+      column-gap: 0;
     }
     &.hide_thumb_x {
       grid-template-rows: auto 0;
+      row-gap: 0;
     }
   }
   .content {
diff --git a/src/components/ScrollArea.tsx b/src/components/ScrollArea.tsx
index 15b179d..b17034d 100644
--- a/src/components/ScrollArea.tsx
+++ b/src/components/ScrollArea.tsx
@@ -177,12 +177,25 @@ export function ScrollArea({
   };
 
   useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (container) {
-      setXScrollNeeded(container.scrollWidth > container.clientWidth);
-      setYScrollNeeded(container.scrollHeight > container.clientHeight);
+    const sizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const container = scrollContainerRef.current;
+        if (container) {
+          setXScrollNeeded(container.scrollWidth > container.clientWidth);
+          setYScrollNeeded(container.scrollHeight > container.clientHeight);
+        }
+      }
+    });
+    if (scrollContainerRef.current) {
+      sizeObserver.observe(scrollContainerRef.current);
     }
-  }, [children]);
+    return () => {
+      if (scrollContainerRef.current) {
+        sizeObserver.unobserve(scrollContainerRef.current);
+      }
+      sizeObserver.disconnect();
+    };
+  }, []);
 
   return (
     <div