help，a question about overflow

[Mr-zsy]

How can i do？when the code beyond the textarea elements‘ borders，and i can’t edit it。Please，help me！

[RoachaelRoadmunk]

I am also noticing this issue.

When you set a fixed height to the code preview, it seems that the inside takes on only the height of the editor rather than the height of its contents which are overflowing.

I played a but the textarea doesn't seem to want to expand to the contents. Is there a pattern we should be following to enable this?

[sofiapoh]

I'm not sure if I understand the issue exactly, could you provide an example on CodeSandbox? It will be easier for me to help with a reproduction!

[Mr-zsy]

I set a 'div' element out of the 'LiveEditor' to achieve it, like this

<div style={{overflow: 'auto'}}>
    <LiveEditor/>
</div>

[rwieruch]

Can confirm. Giving the LiveEditor the following style breaks everything that's outside of the height:

              overflow: 'auto',
              height: '255px',

[appanasantosh]

I am also facing the same issue. When we set the editor with some defined height then the style breaks and unable to edit it. But I have fixed it by wrapping the editor in an div with overflow: auto as below.

<LiveProvider code={code} scope={scope} language="tsx" theme={vsDark} transpileOptions={{ transforms: { classes: false, asyncAwait: false } }}>
      <Box sx={{ display: 'flex', height: '550px' }}>
        <div style={{ overflow: 'auto', width: '50%' }}> // this has fixed the issue
          <LiveEditor onChange={onCodeChange} />
        </div>
        <LivePreview style={{ width: '30%', marginLeft: '5px' }} />
        <LiveError style={{ width: '20%', marginLeft: '5px' }}></LiveError>
      </Box>
    </LiveProvider>