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 子项中需父容器有确定高度，且所有中间祖先均需传递该约束），导致浏览器无法计算滚动边界。
✅ 正确做法是 逐层加固高度链并启用滚动：
确保
.editor在 flex 布局中获得稳定高度
当前.secondary-container使用flex: 1，已合理；但需确认其父级.main-container为flex-column且高度为100vh（你已做到）。✅强制
.editor内容区域具有明确高度上下文
修改 CSS，为.editor添加min-height: 0（防止 flex 项目最小高度干扰）并确保其子元素能继承高度：
.editor {
background-color: #ff00ffff;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0; /* 关键：允许 flex 子项收缩 */
overflow: hidden;
}
-
为
.code-editor设置高度继承链.code-editor是 CodeMirror 的直接容器（含<textarea></textarea>），必须设为height: 100%，且不能有 margin/padding 干扰：
.code-editor {
flex: 1;
height: 100%;
width: 100%;
min-height: 0;
}
最关键一步：为
.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 的基础布局保障。- 避免在
