Blazor环境CodeMirror5.65.3长行无法水平滚动触发页面滚动问题

Blazor项目集成v5.65.3版本CodeMirror编辑器时，编辑器内存在长文本行的场景下，编辑器自身水平滚动不生效，直接触发页面全局滚动，造成整体页面布局错乱。

已确认的前置信息：

• 未修改CodeMirror原生CSS样式，当前核心相关CSS配置如下：

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 750px;
  color: black;
  direction: ltr;

}


.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}

• 编辑器初始化代码如下（绑定change事件用于适配Blazor数据绑定逻辑）：

window.editor= function (dontNetObjRef) {

    editor = CodeMirror.fromTextArea(document.getElementById('myTextArea'), {
        lineNumbers: true,
        indentUnit: 4,
        lineWrapping: true,
        tabMode: "shift",
        gutters: ["CodeMirror-lint-markers"]
    });

    // 绑定CodeMirror的change事件调用C#方法，传递编辑器值适配Blazor数据绑定
    editor.on("change", editor => {
        dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
    });
}

• 已验证的特征：
  • 配置lineWrapping: true开启自动换行后，滚动异常仍然存在
  • 给编辑器设置1000px这类固定宽度值时，滚动功能可正常运行，业务上需要编辑器宽度支持随用户屏幕尺寸自适应

CodeMirror 5.x的滚动容器尺寸计算逻辑，强依赖自身挂载节点的明确宽度约束。自适应宽度场景下，如果.CodeMirror节点本身没有设置宽度边界、或者任意一层父容器的宽度由内容撑开（未触发块级格式化上下文），.CodeMirror-scroll就无法正确计算自身的最大可用宽度，长文本会直接撑大容器整体宽度，最终溢出到页面根节点触发全局滚动。
当前配置仅给.CodeMirror设置了固定高度，缺少宽度相关的约束规则，是触发该问题的直接原因。

不需要修改CodeMirror源码，两步调整即可兼容自适应宽度需求：

1. 调整.CodeMirror的CSS规则，补充宽度约束和溢出隐藏规则，修改后代码如下：

.CodeMirror {
  font-family: monospace;
  height: 750px;
  color: black;
  direction: ltr;
  /* 新增以下配置 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

2. 逐层排查编辑器的父级容器（包括Blazor组件根节点、页面布局容器），移除width: fit-content、display: inline/inline-block这类会让容器宽度被内容撑开的属性，确保父容器为标准块级布局、宽度随上层容器自适应即可。

补充适配：如果开启lineWrapping: true后仍偶发滚动异常，可以在编辑器初始化逻辑末尾增加editor.refresh()手动触发一次尺寸重算。如果窗口大小调整后出现同类异常，给window绑定resize事件，事件回调中调用editor.refresh()即可完成自适应适配。

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