CodeMirror-sizer gets unnecessary negative margin-bottom

I recently updated an app from CodeMirror 4.7.1 to 4.8.1 and https://github.com/codemirror/CodeMirror/commit/b8ea5a73c1410d41c7c51a8dab3bfb2ce11cb669 has been causing some trouble. I’m still trying to figure out a compact repro case, but essentially we have a CodeMirror in styled like

.CodeMirror {
  position: absolute;
  width: 100%;
  height: 100%;
}

The commit above has made it so that CodeMirror-scroller has a negative margin-bottom, which makes it so that when one scrolls down to the bottom of the document, the last line is partially cut off. A temporary fix is to have a rule with margin-bottom: 0 !important, but I’d prefer to get to the bottom of this.

Do you have any idea on why this might be happening, or patches that adjust the conditions under which the bottom margin is set? Or could you explain in a little more detail exactly what that code is trying to accomplish and under what specific conditions that bottom margin should be getting set?

Thank you!

[austinpray]

For posterity:

we had a dumb css rule

.some-container * {
  box-sizing: border-box;
}

That wreaked havoc on codemirror’s margins and such. Set box-sizing back to normal and everything works as expected.

[benmosher]

FWIW, I had to cram CodeMirror into a tight space but also allow its children to render overflow. Used overflow: visible !important; to get around the referenced overflow: scroll !important; in c818907.

I also explicitly set margin-bottom: 0; and margin-right: 0; to negate the negative margins, and that works fine.

I am using scrollbarStyle: null. Perhaps a future version could update this or add another style (intrinsic size mode?) that has no scrollbars, but instead is intrinsic size. (or maybe I missed a cleaner way to do this?)

Anyway, overriding the margins on CodeMirror-scroll back to 0 is a fine workaround. Mostly mentioning here in case others arrive here via search engine after seeing only n - 1 displayed in their CM instance. 😅

Thanks!