Next.js 14项目中Monaco Editor缩小尺寸时无法自适应容器问题

在 Next.js 14 项目中使用 TailwindCSS 集成 Monaco Editor，采用父子组件结构渲染编辑器：

父组件代码（TSX） #

<CodeEditor
  ref={editorRef}
  language={useProgrammingLang.value}
  theme={theme?.toString().toLowerCase()}
  fontSize={editorSettings?.fontSize}
  fontFamily={editorSettings?.fontFamily}
  defaultValue={codeSnippet}
  loading={<TbLoader3 />}
/>

子组件（CodeEditor.tsx）代码 #

<div className="size-full">
  <Editor
    height="100%"
    width="100%"
    defaultLanguage={language}
    defaultValue={defaultValue}
    theme={`vs-${theme}`}
    onMount={handleEditorDidMount}
    onChange={handleEditorChange}
    loading={loading}
    options={{
      readOnly: false,
      lineNumbers: 'on',
      fontSize:
        typeof fontSize === 'string' ? parseInt(fontSize, 10) : fontSize,
      fontFamily,
      automaticLayout: true,
      glyphMargin: false,
      minimap: { enabled: true },
      scrollBeyondLastLine: false,
      wordWrap: 'off',
      tabSize: 4,
      cursorStyle: 'line',
      formatOnPaste: true,
      dragAndDrop: false,
      showFoldingControls: 'mouseover',
    }}
  />
</div>

问题描述 #

页面左侧设有可展开/收起的侧边栏，右侧加载编辑器。关闭侧边栏时编辑器可正常扩展宽度，但打开侧边栏时，编辑器无法随父容器缩小宽度，导致页面出现横向滚动条；页面缩放后也会出现相同问题。

解决方案 #

1. 修正容器布局样式 #

确保编辑器所在的父容器使用 Tailwind 的 flex-1 overflow-hidden 样式，限制容器尺寸不超出可视区域，避免容器本身溢出：

// 页面结构示例
<div className="flex h-screen">
  <Sidebar />
  {/* 编辑器父容器 */}
  <div className="flex-1 overflow-hidden">
    <CodeEditor {...props} />
  </div>
</div>

2. 手动触发编辑器布局更新 #

Monaco Editor 的 automaticLayout 选项有时无法感知容器的动态尺寸变化（比如侧边栏切换），需要手动监听尺寸变化并调用 editor.layout() 强制更新：

修改子组件 CodeEditor.tsx，保存编辑器实例并添加监听：

import { useRef, useEffect } from 'react';
import Editor from '@monaco-editor/react';
import type { IStandaloneCodeEditor } from 'monaco-editor';

const CodeEditor = ({ sidebarOpen, ...props }) => {
  const editorInstanceRef = useRef<IStandaloneCodeEditor | null>(null);

  const handleEditorDidMount = (editor: IStandaloneCodeEditor) => {
    editorInstanceRef.current = editor;
  };

  // 监听窗口resize和侧边栏状态变化，触发布局更新
  useEffect(() => {
    const updateLayout = () => {
      editorInstanceRef.current?.layout();
    };

    window.addEventListener('resize', updateLayout);
    // 侧边栏切换时强制更新布局
    updateLayout();

    return () => {
      window.removeEventListener('resize', updateLayout);
    };
  }, [sidebarOpen]); // 依赖侧边栏状态，确保切换时触发

  return (
    <div className="size-full">
      <Editor
        {...props}
        onMount={handleEditorDidMount}
        options={{
          ...props.options,
          automaticLayout: true, // 保持开启自动布局
        }}
      />
    </div>
  );
};

export default CodeEditor;

3. 验证样式优先级 #

检查是否有其他 CSS 规则覆盖容器宽度设置，比如固定宽度元素、自定义样式的优先级干扰，确保 Tailwind 的 w-full flex-1 样式正常生效。

关键说明 #

• automaticLayout 负责编辑器初始布局，但容器动态变化时，必须手动调用 layout() 让编辑器重新计算尺寸。
• overflow-hidden 是核心，避免父容器因编辑器尺寸溢出而出现滚动条。

内容的提问来源于stack exchange，提问作者Umair Jameel