diff --git a/libs/codemirror-editor/src/themes.ts b/libs/codemirror-editor/src/themes.ts
index ffe6d06..b6cae50 100644
--- a/libs/codemirror-editor/src/themes.ts
+++ b/libs/codemirror-editor/src/themes.ts
@@ -13,13 +13,15 @@ export type ThemeName = 'light' | 'dark';
  *    （`#333338`）特异性高于 catppuccin 的 `.cm-gutters`，catppuccin 的 base 背景被
  *    压制，行号列与代码区背景不一致。用 `!important` 强制透明，继承 editor base 色。
  *
- * 2. `.cm-editor` 默认不撑满父容器：core 的 `&` 没设 height，编辑器只占内容高度，
- *    容器剩余空间透出父元素背景，造成「有行号的上半部分」与「空白下半部分」色差。
- *    用 `& { height: 100% }` 让编辑器填满容器。
+ * 2. `.cm-editor` 默认不撑满父容器：core 的 `&` 没设 height/flex，编辑器只占内容
+ *    高度。`height: 100%` 在父容器只有 min-height 时会塌缩（CSS：百分比高度需要
+ *    父元素有明确 height）。改用 `flex: 1`，配合父容器 `display: flex`，编辑器才能
+ *    真正填满，避免「有内容的上半部分」与「空白下半部分」背景割裂。
  */
 const gutterBackgroundOverride: Extension = EditorView.theme({
   '&': {
-    height: '100%',
+    flex: '1 1 0',
+    minHeight: '0',
   },
   '.cm-gutters': {
     backgroundColor: 'transparent !important',
diff --git a/src/components/code_runner/runner.rs b/src/components/code_runner/runner.rs
index 363e40c..b6f05cd 100644
--- a/src/components/code_runner/runner.rs
+++ b/src/components/code_runner/runner.rs
@@ -245,7 +245,7 @@ pub fn CodeRunner(
             div {
                 id: "{container_id}",
                 class: "code-runner-editor font-mono text-sm",
-                style: "min-height: 160px",
+                style: "min-height: 160px; display: flex; flex-direction: column",
             }
             // 输出区
             if !output().is_empty() {
diff --git a/src/pages/admin/system.rs b/src/pages/admin/system.rs
index 5a2d985..b2ee277 100644
--- a/src/pages/admin/system.rs
+++ b/src/pages/admin/system.rs
@@ -910,10 +910,11 @@ fn SqlConsoleTab() -> Element {
                     }
                     span { class: "text-xs text-[var(--color-paper-tertiary)] font-mono", "⌘↵ 执行" }
                 }
-                // CodeMirror 容器
+                // CodeMirror 容器：用 flex 让 .cm-editor(flex:1) 填满整个高度，
+                // 避免编辑器塌缩到内容高度、底部透出容器背景造成上下色差。
                 div {
                     id: "sql-editor",
-                    style: "min-height: 280px",
+                    style: "min-height: 280px; display: flex; flex-direction: column",
                 }
             }