diff --git a/website/src/layouts/base-layout.astro b/website/src/layouts/base-layout.astro
index f61eaf53dec..fa856774c58 100644
--- a/website/src/layouts/base-layout.astro
+++ b/website/src/layouts/base-layout.astro
@@ -73,6 +73,12 @@ const initJsIntegrity = computeSriHash("1ds-init.js");
 
     .main {
       flex: 1;
+      /* Lay out page content as a column so pages can opt into filling the
+         available height (e.g. the playground) via `flex: 1` on their content,
+         rather than hard-coding `100vh - var(--header-height)`, which does not
+         account for the real rendered header height. */
+      display: flex;
+      flex-direction: column;
       background-color: var(--colorNeutralBackground1);
     }
 
diff --git a/website/src/pages/playground.astro b/website/src/pages/playground.astro
index 3035f1eca7f..407b17b2a02 100644
--- a/website/src/pages/playground.astro
+++ b/website/src/pages/playground.astro
@@ -20,9 +20,25 @@ const latestVersion = versions[0];
   })}
 />
 <BaseLayout footer={false}>
-  <div style={{ height: "calc(100vh - var(--header-height))", width: "100%" }}>
+  <div class="playground-container">
     <AsyncPlayground client:only="react" latestVersion={latestVersion}>
       <LoadingSpinner slot="fallback" message="Loading playground..." />
     </AsyncPlayground>
   </div>
 </BaseLayout>
+
+<style>
+  /* Fill the remaining height provided by the base layout's `.main` flex column
+     instead of subtracting a fixed `--header-height`, which is smaller than the
+     real rendered header and caused the page to overflow with a vertical
+     scrollbar. `display: grid` gives the playground (which fills via
+     `height: 100%`) a definite track to resolve against — a flex-sized block on
+     its own is not treated as a definite height for percentage-height children,
+     which would otherwise collapse the playground. */
+  .playground-container {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    display: grid;
+  }
+</style>