diff --git a/.changeset/silly-dancers-suffer.md b/.changeset/silly-dancers-suffer.md
new file mode 100644
index 00000000000..5113a75dec3
--- /dev/null
+++ b/.changeset/silly-dancers-suffer.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/css-reset": patch
+---
+
+Fix css in 100vh polyfill
diff --git a/packages/components/css-reset/src/css-reset.tsx b/packages/components/css-reset/src/css-reset.tsx
index 780c96b6520..620ada23a08 100644
--- a/packages/components/css-reset/src/css-reset.tsx
+++ b/packages/components/css-reset/src/css-reset.tsx
@@ -18,7 +18,9 @@ const vhPolyfill = `
   }
 
   @supports (height: 100lvh) {
-    --chakra-vh: 100lvh;
+    :root {
+      --chakra-vh: 100lvh;
+    }
   }
 `