Javascript 通过JS（quilljs）注入的HTML元素与flexbox冲突

我试图创建一个非常简单的页面，本质上与stack overflow的布局没有什么不同，因为有一个侧边栏和一个可以滚动的“内容”区域。然而，我的内容区域完全由文本编辑器占据

我只是创建了一个div，并告诉quilljs将该div用于编辑器

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

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

然而，这个解决方案很快就崩溃了，因为有了可变大小的工具栏，以及手动调整窗口宽度。如果存在的话，我想找到一个更健壮的解决方案

下面是问题的代码笔（请注意scollbar的底部是如何被切断的）：

---

您可以将您的

文章和
#编辑器的样式如下：


var quill=新的quill（“#编辑器”{
主题：“雪”
});
html，
身体{
身高：100%；
线高：1.5；
边际：0px；
}
.包裹{
高度：100vh；
显示器：flex；
}
主要{
弹性：1；
显示器：flex；
}
旁白{
溢出y：自动；
最小宽度：200px；
最大宽度：200px；
弹性：1；
背景：#f7f7f7；
}
文章{
显示器：flex；
柔性流动：柱；
溢出：隐藏；
弹性：2；
背景：#f0eeee；
高度：100vh；
}
#编辑{
高度：自动；
溢出：自动；
}
h1{
边际上限：0；
}


a
a
a
a
a
a
a
a


a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a

a a
a a
a a
a a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a

感谢您的回复，显然我还没有很好地掌握flex。我在本地复制此修复程序时遇到了问题，并发现了本地html页面中缺少doctype声明的问题。
     <article>
         <div id="ql-toolbar"></div>
         <div id="editor"></div>
    </article>

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