problem description

wanted to be a personal website with vue.js + element-ui, but when I introduced a rich text editor, the editor was very long, occupying the entire width of the page, and very narrow, showing scrollbars. I recently began to study the front-end and ui things, but it is difficult to solve, so I would like to ask the gods, how to solve this. Please

vue-quill-editorcsstoolbarcsstoolbartoolbartoolbarF12

related codes

/ / Please paste the code text below (do not replace the code with pictures)
the code is the same as the online method
and then you have to introduce the css you added to make it narrower and taller, but why is it the most standard by default if you don"t need it on the official website?
< template >

<div>
    <el-upload
            class="avatar-uploader"
            :action="serverUrl"
            name="img"
            :headers="header"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload">
    </el-upload>
    <el-row v-loading="quillUpdateImgLodaing">
        <quill-editor ref="myTextEditor"
                v-model="content"
                :config="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
        </quill-editor>
    </el-row>
</div>

< / template >
< style >
.quill-editor {

width: 50%;
height: 700px;

}
< / style >

what result do you expect? What is the error message actually seen?

just want to display as a normal default effect without having to manually add css styles yourself.
I don"t know if it has anything to do with the elementui I set up, but this toolbar should not be displayed like this!
if anyone has encountered such a problem, please let me know, thank you very much!