Quill Editor and Flexbox Elements

Question

Scenario Two flexbox elements sitting side by side, inside a container, with quill in the left element. Quill having bounds set to the left element, not document.body and overflow-wrap added to the .ql-editor class.

Issue As quill reaches the right most bound of the editor it breaks to the next line, but still continually pushes the right flexbox element, shrinking it until it is impossible to shrink it anymore.

Desired functionality To have quill confined to the bounds of the flexbox element which contains it, without expanding the element and WITHOUT the need to specify a width in order to support responsive designs.

Anyone have an idea how to achieve this?

Here is an example to further illustrate the issue.

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

You can set .left flex: 1 (I also added padding to give it some space) to limit its growth (More info).

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>