Fixed height of quill editor that fills a grid cell span

Question

How can I force the quill editor to not exceed its initial height?

I have a grid layout with some items, all are basically external components, the heights of which I do not know (in the sense: I do not want to hard-code any heights, because I might change the contents or the content's own implementation changes).

In the example below, I have a 2x2 grid

Content1 Editor
Content2 Editor

where the editor spans two rows in the second column. (Here, Editor is actually a wrapper component around the actual editor tag occupying quill.)

My goal is now that the total grid/row height is determined by the other content, and the Editor uses the same height as the content. The editor should fill its cells, but not exceed it once more text is entered in the editor. Instead, the editor content should scroll (and the toolbar stay in place).

First the snippet:

var quill = new Quill('#editor', {
  modules: {
    toolbar: [[{ header: [1, 2, false] }], ['bold', 'italic', 'underline']]
  },
  theme: 'snow'
});

html,body {
  margin: 0;
}

#grid-container {
  display: grid;
  column-gap: 16px;
  grid: "O1 E" auto
        "O2 E" auto
      / auto auto;
  border: 1px solid; border-color: green;
}

#other1 {
  grid-area: O1;

  /* internal to the content: */
  height: 70px;
  background-color: grey;
}

#other2 {
  grid-area: O2;

  /* internal to the content: */
  height: 70px;
  background-color: blue;
}

#editor-cell {
  grid-area: E;
  align-self: stretch;
}

#editor-wrapper {
  display: flex;
  height: 100%;
  /*flex-direction: column;*/
}

#editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.js"></script>
<div id="grid-container">
  <div id="other1">Other</div>
  <div id="other2">Content</div>
  <div id="editor-cell">
    <div id="editor-wrapper">
      <div id="editor-container">
        <div id="editor"><p>Sample</p><p>Line 2</p><p>Line 3</p><p>Line 4</p></div>
      </div>
    </div>
  </div>
</div>

You can try it out and add an additional line in the editor (e.g. after "Line 4"). Notice how the other cells in the first column grow and there is now an unwanted additional gap between the content in the first column.

Due to the different components I use, I have a few levels of divs. First is the #editor-container, which contains the actual quill editor and the toolbar that gets inserted above #editor inside #editor-container. Then there is the #editor-wrapper, which wraps the whole container. Finally, we have the actual grid cell #editor-cell.

As you can see, I am using flex-layout. This at least makes quill use all available height - but it does not constrain its max-height.

The actual configuration of quill can also by dynamic, i.e. in some cases the toolbar might be two rows tall if there are many buttons on it.

Additional info: My actual application is an Angular app using ngx-quill. I want to adhere to view encapsulation and avoid any global styles or ::ng-deep, i.e. no changes to the internal styles/themes provided by quill.

Oh, and of course a CSS-only solution would be very much appreciated. :D

But any kind of work-around would also be very welcome.

Solution attempt #1

I now have a first hacky work-around by fixing the grid row's height and setting min-height: 0 on the #editor. I consider #editor to be an implementation detail, so I would rather not have any CSS applied to it, but I can live with that.

But I definitely do not want to fix the grid row's height ("O1 E" 70px). I am still struggling to find a solution for that.

var quill = new Quill('#editor', {
  modules: {
    toolbar: [[{ header: [1, 2, false] }], ['bold', 'italic', 'underline']]
  },
  theme: 'snow'
});

html,body {
  margin: 0;
}

#grid-container {
  display: grid;
  column-gap: 16px;
  grid: "O1 E" 70px
        "O2 E" 70px
      / auto auto;
  border: 1px solid; border-color: green;
}

#other1 {
  grid-area: O1;

  /* internal to the content: */
  height: 70px;
  background-color: grey;
}

#other2 {
  grid-area: O2;

  /* internal to the content: */
  height: 70px;
  background-color: blue;
}

#editor-cell {
  grid-area: E;
  align-self: stretch;
}

#editor-wrapper {
  display: flex;
  height: 100%;
  /*flex-direction: column;*/
}

#editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#editor {
  min-height: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.js"></script>
<div id="grid-container">
  <div id="other1">Other</div>
  <div id="other2">Content</div>
  <div id="editor-cell">
    <div id="editor-wrapper">
      <div id="editor-container">
        <div id="editor"><p>Sample</p><p>Line 2</p><p>Line 3</p><p>Line 4</p></div>
      </div>
    </div>
  </div>
</div>

Answer 1

Old question thought I would answer anyway. You can manipulate the quill editor using the selector. OF cours you can add an overriding CSS (use !important)

In JavaScript:

$(".ql-editor").css("height", 300)})

In CSS:

.ql-editor{
    height: 300px!important;
 }