NextJS React Component does not respect div height about react-textarea-code-editor

[jaywcjlove]

- <div style={{ height: "100px" }}>
+ <div style={{ height: "100px", overflow: "auto" }}>
  <CodeEditor
    value={code}
    language="sol"
    placeholder="Please enter JS code."
    onChange={(evn) => setCode(evn.target.value)}
    padding={15}
    style={{
-      overflow: "auto",
      fontSize: 12,
      backgroundColor: "#f5f5f5",
      fontFamily:
        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
    }}
  />
</div>

@Ezzahhh https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-ww4mvm?file=/pages/index.js:4483-4942

[jaywcjlove]

@Ezzahhh https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-ww4mvm?file=/pages/index.js:4521-4964

<CodeEditor
  value={code}
  language="sol"
  placeholder="Please enter JS code."
  onChange={(evn) => setCode(evn.target.value)}
  padding={15}
  style={{
    overflow: "auto",
    fontSize: 12,
+    height: 100,
    backgroundColor: "#f5f5f5",
    fontFamily:
      "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
  }}
/>

[Ezzahhh]

@Ezzahhh https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-ww4mvm?file=/pages/index.js:4521-4964

<CodeEditor

  value={code}

  language="sol"

  placeholder="Please enter JS code."

  onChange={(evn) => setCode(evn.target.value)}

  padding={15}

  style={{

    overflow: "auto",

    fontSize: 12,

+    height: 100,

    backgroundColor: "#f5f5f5",

    fontFamily:

      "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"

  }}

/>

I did try this and it does reduce the height. However try pasting something large and you get a weird behaviour where the cursor does not sit where the text actually is.

[Ezzahhh]

- <div style={{ height: "100px" }}>
+ <div style={{ height: "100px", overflow: "auto" }}>
  <CodeEditor
    value={code}
    language="sol"
    placeholder="Please enter JS code."
    onChange={(evn) => setCode(evn.target.value)}
    padding={15}
    style={{
-      overflow: "auto",
      fontSize: 12,
      backgroundColor: "#f5f5f5",
      fontFamily:
        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
    }}
  />
</div>

@Ezzahhh https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-ww4mvm?file=/pages/index.js:4483-4942

Wow nice! I didn't pay close enough attention earlier. This solves it for me. Thank you very much