CodeMirror 编辑器默认会随内容增长而撑开容器，导致布局失控；解决关键在于为编辑器或其外层容器显式设置固定高度（或最大高度）并启用 overflow: auto 或 overflow: scroll，同时确保父级元素具备正确的 flex 布局约束。

codemirror 编辑器默认会随内容增长而撑开容器，导致布局失控；解决关键在于为编辑器或其外层容器显式设置固定高度（或最大高度）并启用 `overflow: auto` 或 `overflow: scroll`，同时确保父级元素具备正确的 flex 布局约束。

在构建类似 VS Code 的多面板 IDE 界面时，CodeMirror 编辑器常因未受控的尺寸行为破坏整体布局——尤其当使用 Split.js 进行横向分割后，.editor 容器内动态创建的 .code-editor 与 .CodeMirror 实例若缺乏明确的高度约束，便会随着代码行数增加无限扩张，进而拖垮整个 split-container 高度。

根本原因在于：CodeMirror v5 的渲染机制依赖于宿主 DOM 元素的实际尺寸。它不会自动限制自身高度，也不会主动触发滚动；相反，它会尽可能“撑满”可用空间。而你的 CSS 中虽然为 .editor 设置了 flex: 1 和 overflow: hidden，但 .code-editor 和 .CodeMirror 本身未被赋予明确的高度上下文（如 height: 100% 在 flex 子项中需父容器有确定高度，且所有中间祖先均需传递该约束），导致浏览器无法计算滚动边界。

✅ 正确做法是 逐层加固高度链并启用滚动：

1. 确保 .editor 在 flex 布局中获得稳定高度
   当前 .secondary-container 使用 flex: 1，已合理；但需确认其父级 .main-container 为 flex-column 且高度为 100vh（你已做到）。✅

2. 强制 .editor 内容区域具有明确高度上下文
   修改 CSS，为 .editor 添加 min-height: 0（防止 flex 项目最小高度干扰）并确保其子元素能继承高度：

.editor {
  background-color: #ff00ffff;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* 关键：允许 flex 子项收缩 */
  overflow: hidden;
}

3. 为 .code-editor 设置高度继承链
   .code-editor 是 CodeMirror 的直接容器（含 <textarea></textarea>），必须设为 height: 100%，且不能有 margin/padding 干扰：

.code-editor {
  flex: 1;
  height: 100%;
  width: 100%;
  min-height: 0;
}

4. 最关键一步：为 .CodeMirror 根元素启用滚动
   CodeMirror v5 初始化后会在 .code-editor 内创建一个带类名 CodeMirror 的 <div>。你<strong>不能仅靠 CSS 类选择器全局设置 <code>.CodeMirror { height: 100%; overflow: auto } —— 因为 CodeMirror 可能重用或动态插入该元素，且其内嵌的 .CodeMirror-scroll 才是实际滚动容器。推荐方案是：

   ✅ 在初始化后，通过 JS 显式设置 .CodeMirror-scroll 的样式（更健壮）：

   // 在 createEditor() 函数中，CodeMirror.fromTextArea 调用后添加：
   editor.getWrapperElement().style.height = '100%';
   const scrollContainer = editor.getScrollInfo().clientHeight > 0 
     ? editor.getScrollerElement() 
     : editor.getWrapperElement().querySelector('.CodeMirror-scroll');
   if (scrollContainer) {
     scrollContainer.style.overflow = 'auto';
     scrollContainer.style.height = '100%';
   }

   ✅ 或更简洁的纯 CSS 方案（推荐）：
   在 styles.css 底部追加：

   .code-editor .CodeMirror,
   .code-editor .CodeMirror-scroll {
     height: 100% !important;
     overflow: auto !important;
   }
   .code-editor .CodeMirror-scroll {
     /* 确保滚动条不遮挡内容 */
     padding-right: 4px;
   }

   ⚠️ 注意事项：

   • 避免在 .CodeMirror 上设置 max-height（可能被内部逻辑覆盖），优先用 height: 100% + overflow: auto；
   • 若使用 lineWrapping: true，需额外确保 .CodeMirror-lines 不溢出，可加 word-break: break-word；
   • Split.js 分割后，各面板尺寸由 sizes 控制，但 CodeMirror 仍需自身容器约束 —— 二者职责分离，不可互相替代；
   • 开发时可用浏览器开发者工具实时修改 .CodeMirror-scroll 的 height 和 overflow 快速验证（如你答案中所述），再固化到 CSS/JS 中。

   最终效果：编辑器内容超出可视区域时，右侧出现原生滚动条，容器尺寸严格保持在 Split.js 分配的 60% 区域内，不再影响侧边栏或状态栏布局。这是构建专业级 Web IDE 的基础布局保障。