Problem with autoresize and min height

[medihack]

trafficstars

I want to use react-codemirror in an editor that auto-resizes, but I still want to use a minimum height. Unfortunately, react-codemirror does set height: '100% !important' on the .cm-scroller element. That way, I always end up with something like this when only adding a minHeight and maxHeight:

<CodeMirror minHeight="200px" maxHeight="75vh" theme="dark" value={optionsSource} />

I would like to have the horizontal scrollbar at the bottom of the editor, but still want it to grow until a given height.

Is there a good workaround for having an auto-resizing editor that also has a minimum height? Or can I turn off the height: '100% !important' somehow?

[medihack]

Here is some workaround I found to overwrite the height of cm-scroller set by react-codemirror:

  const theme = EditorView.theme({
    "& div.cm-scroller": {
      minHeight: `${minHeight} !important`,
    },
  })

  return (
    <CodeMirror
      minHeight={minHeight}
      maxHeight="75vh"
      theme={colorScheme === "dark" ? "dark" : "light"}
      extensions={[theme]}
      value={optionsSource}
    />
  )

It's a bit ugly, but now the horizontal scrollbar is on the bottom of the editor pane. But I still wonder why the height: '100% !important' was explicitly set by react-codemirror in the first place. The cm-scroller already has a 100% height (without important) set by CodeMirror itself.

[jaywcjlove]

Not sure if this is a solution.

<CodeMirror
  height="100%"
  style={{ height: "100%" }}
/>