텍스트 에디터 관련 질문

quill js로 글쓰기 페이지를 만들고 있는데 

import React, { useState } from 'react';
import ReactQuill from "react-quill";
import './App.css'
import 'react-quill/dist/quill.snow.css'

function App() {
const [quillValue, setQuillValue] = useState('');

return (
<div className="App">
<ReactQuill
style={{ width: "800px" }}
value={quillValue}
onChange={setQuillValue}
/>
<div id="preview-box" >
<div id="text-container" dangerouslySetInnerHTML={{ __html: quillValue }}></div>
</div>
</div>
 );
}

export default App;
///////////////////App.tsx
.App {
display: flex;
overflow: hidden;
}
.App > #preview-box {
width: 200px;
height: 500px;
}
#text-container {
position: absolute;
width: 100%;
}
////////////////App.css
이렇게 실행을 했을때 에디터에서 글을 길~~~~게 쓰면 미리보기 화면에서 글자가 화면 밖으로 넘어갔을때 줄 바꿈이 안되고 계속 옆으로만 작성이 되서 overflow:hidden; 속성을 줘도 똑같습니다 ㅠㅠ 해결 방법 좀 알려주시면 감사하겠습니다!!