Why Codemirror editor does NOT scroll horizontally with long line?

I've a code mirror version: 5.65.3 with Blazor. When I've a long line in the editor the horizontal scroll doesn't work, it rather uses the scroll of the page which mess out the whole page.

Like this:

I don't think that I changed any CSS in Codemirror.

Here is some related CSS lines:

    .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;
}

I'm calling the codemirror through this code: (the onchange is because I'm using Blazor for binding purposes )

window.editor= function (dontNetObjRef) {

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

    //JavaScript function use the onchange event of CodeMirror to invoke the C# method and pass the value of the myTextArea .

    editor.on("change", editor => {
        dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
        // console.log(editor.getValue());

    });

Note: even if I used lineWrapping: true it moved to the second line and does the same issue with scroll. Also, it works well when I set a fixed width like 1000px but I'd like to make it auto in case the screen size of the user changes.

While working on a project I've encountered the same issue - that is a problem with CSS.

I fixed it with that pretty simple flexbox solution:

<div class="root-wrapper">                <!-- Editor parent container -->
    <div class="cm-editor ͼ1 ͼ2 ͼ4">      <!-- CodeMirror stuff (v6 in my case) -->
        ...
    </div>
</div>

The corresponding styling:

.root-wrapper {
    display: flex;
    flex-direction: row;

    .cm-editor {
        width: 0;
        flex-grow: 1;
    }
}