HTML elements injected via JS (quilljs) conflicting with flexbox

Question

I'm trying to create a very simple page, essentially no different than stack overflow's layout in that there is a sidebar and a "content" area which can scroll. My content area however is meant to be taken up entirely by a quilljs text editor.

I just create a div and tell quilljs to use that div for the editor...

    <article>
         <div id="editor"></div>
    </article>

    <script>
        var quill = new Quill('#editor', {theme: 'snow'});
    </script>

Which works fine in theory, however quilljs injects an additional div above the editor div, so I end up with:

     <article>
         <div id="ql-toolbar"></div>
         <div id="editor"></div>
    </article>

If I inspect and delete the toolbar div manually, I can see that the editor div is sized as desired (it fills the entire article element and any overflowing text has a scrollbar).

My conclusion is that injecting the additional div toolbar is the root cause of the issue, however I can't seem to find a good solution...

The only solution I currently see is to manually adjust the size of the "editor" div in order to compensate for the additional div that I know will be added.

 #editor {
  max-height: calc(100% - 40px);
 }

However this solution falls apart pretty quick with the prospect of variable size toolbars and also when manually adjusting the window width. I'd like to find a more robust solution if one exists.

Here's a codepen of the issue (notice how the bottom of the scollbar is cut off): https://codepen.io/anon/pen/wQyxVm

Answer 1

You might style your article and #editor like this:

var quill = new Quill('#editor', {
  theme: 'snow'
});

html,
body {
  height: 100%;
  line-height: 1.5;
  margin: 0px;
}

.wrap {
  height: 100vh;
  display: flex;
}

main {
  flex: 1;
  display: flex;
}

aside {
  overflow-y: auto;
  min-width: 200px;
  max-width: 200px;
  flex: 1;
  background: #f7f7f7;
}

article {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  flex: 2;
  background: #f0eeee;
  height: 100vh;
}

#editor {
  height: auto;
  overflow: auto;
}

h1 {
  margin-top: 0;
}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />

<div class="wrap">
  <main>
    <aside>
      <div class="tab">
        <ul id="tablist">
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
          <li>a</li>
        </ul>
      </div>

    </aside>

    <article>
      <div id="editor">
        <p>
          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a
          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a
        </p>
      </div>
    </article>
  </main>
</div>