diff --git a/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx b/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
index 4b4923356a..4b4950f843 100644
--- a/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
@@ -33,7 +33,7 @@ export default function CompareColumn({ column, onCancel, onRemove }: CompareCol
   const { id, model, status, metrics, response, errorMessage } = column;
 
   return (
-    <div className="flex flex-col h-full border-r border-border last:border-r-0 min-w-0">
+    <div className="flex flex-col h-full border-r border-border last:border-r-0 min-w-0 min-h-0 overflow-hidden">
       {/* Column header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border bg-bg-alt shrink-0">
         <div className="flex items-center gap-2 min-w-0">
diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
index 55ade7edc3..ff9e1998de 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
+++ b/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
@@ -417,7 +417,7 @@ export default function CompareTab({ configState }: CompareTabProps) {
 
       {/* Columns area */}
       <div
-        className="flex-1 grid overflow-hidden"
+        className="flex-1 grid overflow-x-hidden min-h-0"
         style={{
           gridTemplateColumns: `repeat(${Math.max(columns.length, 1)}, minmax(0, 1fr))`,
         }}
diff --git a/tests/unit/playground-compare-column-scroll-13316.test.ts b/tests/unit/playground-compare-column-scroll-13316.test.ts
new file mode 100644
index 0000000000..9447c4f79c
--- /dev/null
+++ b/tests/unit/playground-compare-column-scroll-13316.test.ts
@@ -0,0 +1,35 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// #13316: a long response in one Compare column scrolled the whole grid. Each column
+// must be its own bounded flex container (min-h-0 + overflow-hidden) and the grid must
+// not clip vertically, so every column's body scrolls independently.
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const componentsDir = join(
+  root,
+  "src",
+  "app",
+  "(dashboard)",
+  "dashboard",
+  "playground",
+  "components"
+);
+
+test("#13316 Compare column root is a bounded, clipped flex column", () => {
+  const src = readFileSync(join(componentsDir, "CompareColumn.tsx"), "utf8");
+  const rootClass = src.match(/<div className="(flex flex-col h-full[^"]*)"/)?.[1] ?? "";
+  assert.match(rootClass, /\bmin-h-0\b/);
+  assert.match(rootClass, /\boverflow-hidden\b/);
+});
+
+test("#13316 Compare grid clips horizontally only and can shrink", () => {
+  const src = readFileSync(join(componentsDir, "tabs", "CompareTab.tsx"), "utf8");
+  const gridClass = src.match(/className="(flex-1 grid[^"]*)"/)?.[1] ?? "";
+  assert.match(gridClass, /\bmin-h-0\b/);
+  assert.match(gridClass, /\boverflow-x-hidden\b/);
+  assert.doesNotMatch(gridClass, /(^|\s)overflow-hidden(\s|$)/);
+});