Quill: How to prevent toolbar from scrolling and set the height?

Question

I am trying to follow the sample at https://quilljs.com/playground/#autogrow-height but have problems setting the height of the editor box and preventing the toolbar from scrolling off-screen.

My code is:

<div id="editorcontainer" style="height:10em; min-height:100%; overflow-y:auto;">
   <div id="editor" name="editor" style="min-height:100%; height:auto;"></div>
</div>

<script>
  var quill = new Quill("#editor",{
     modules: {
       toolbar: [ ... ]
         },
         scrollingContainer: "#editorcontainer",
         theme: "snow"
     });
</script>

The JS Filddle is available at https://jsfiddle.net/OldGeezer/xpvt214o/556844/

The output looks like this:

There are two problems:

1. The tool bar is not fixed and scrolls.
2. The vertical scrollbar has a scrollable region all the time, even when the editor is empty.

How do I solve these two problems?

Answer 1

I had to modify two of quill's classes to get what I wanted. Like so

.ql-container.ql-snow {
    height: auto;
}
.ql-editor {
    height: 150px;
    overflow-y: scroll;
}