Quill Editor and Flexbox Elements

Question

场景两个flexbox元素并排放置在一个容器内，左侧元素中有quill。Quill的边界设置为左元素，而不是添加到.ql-editor类的document.body和overflow-wrap。

问题当quill到达编辑器的最右边边界时，它会打断到下一行，但仍然不断地推动右侧的flexbox元素，将其收缩，直到无法再收缩为止。

所需功能将套筒限制在包含套筒的柔性盒元件的边界内，而无需扩展元件，也无需指定宽度以支持响应设计。

有人知道如何做到这一点吗？

下面是一个例子来进一步说明这个问题。

var toolbarOptions = [[{ 'header': [1, 2, 3, 4, 5, 6, false] }, 'bold', 'italic', 'underline', { 'list': 'bullet' }, { 'color': [] }, { 'background': [] }, { 'align': [] }]];
var quill = new Quill('.editor', {
theme: 'snow',
bounds: '.left',
modules:
{
toolbar: toolbarOptions
}
});
this.quill = quill;
this.quill.root.innerHTML = "Type in here until you get a second line the quill editor... it will happen eventually";

.container
{
display: flex;
flex-direction: initial;
}
.left
{
display: flex;
flex-direction: column;
}
.right
{
display: flex;
}
.ql-editor
{
overflow-wrap: anywhere;
}

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div class="container">
<div class="left">
<div class="editor">
</div>
</div>
<div class="right">
Just a place holder
</div>
</div>

Answer 1

您可以设置.leftflex: 1(我还添加了padding以给它一些空间(来限制它的增长(更多信息(。

var toolbarOptions = [
[{
'header': [1, 2, 3, 4, 5, 6, false]
}, 'bold', 'italic', 'underline', {
'list': 'bullet'
}, {
'color': []
}, {
'background': []
}, {
'align': []
}]
];
var quill = new Quill('.editor', {
theme: 'snow',
bounds: '.left',
modules: {
toolbar: toolbarOptions
}
});
this.quill = quill;
this.quill.root.innerHTML = "Type in here until you get a second line the quill editor... it will happen eventually";

.container {
display: flex;
flex-direction: initial;
}
.left {
display: flex;
padding-right: 5px;
flex-direction: column;
flex: 1;
}
.right {
display: flex;
}
.ql-editor {
overflow-wrap: anywhere;
}
.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
word-break: break-all;
}

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div class="container">
<div class="left">
<div class="editor">
</div>
</div>
<div class="right">
Just a place holder
</div>
</div>