Content goes over the toolsbar

[soma83]

Hello!
I'm trying to make a simple markdown editor. If the content is large then the vertical scrollbar appears, which is the expected behaviour, but the content goes over the toolbar, not behind it.

This is my code:

<div style={{maxWidth: '800px', margin: '0 auto'}}>
      <div style={{
        border: '1px solid #ccc',
        borderRadius: '4px',
        height: height,
        overflow: 'auto'
      }}>
        <MDXEditor
          markdown={value}
          onChange={handleChange}
          readOnly={!editable}
          spellCheck={false}
          autoFocus
          contentEditableClassName={`prose max-w-full ${!editable ? 'cursor-not-allowed' : ''}`}
          plugins={[
            headingsPlugin({allowedHeadingLevels: [1, 2, 3]}),
            markdownShortcutPlugin(),
            listsPlugin({}),
            toolbarPlugin({
              toolbarContents: () => (editable ? (
                <>
                  <UndoRedo/>
                  <Separator/>
                  <BoldItalicUnderlineToggles/>
                  <Separator/>
                  <ListsToggle options={['bullet', 'number']}/>
                  <Separator/>
                  <BlockTypeSelect/>
                </>
              ) : <div/>)
            })
          ]}
        />
      </div>
    </div>
    ```
    
    Is there any way to solve it?

[petyosi]

The code you posted looks like this when I run it locally:

You can use a codesandbox to reproduce the issue, I will look into it.

[soma83]

Thanks for the response. I did this:

useEffect(() => {
    const container = document.querySelector('[class^="_rootContentEditableWrapper"]');
    if (container) {
      container.style.position = 'initial';
    }
  }, []);