Css 100%高度超出我的flex布局

我用flex box创建了一个有点神圣的布局。在我将Quill文本编辑器插入content_包装器容器之前，它的工作原理与没有任何滚动条的情况完全相同。在这个容器中，有顶部工具栏，还有一个编辑器的主div

当我试图将编辑器的高度设置为100%时，它会产生溢出（我认为这是因为它占据了正文的100%，但没有意识到它上面还有我的自定义蓝色工具栏）

我需要如何设置我的页面，使编辑器不会超出页面底部

请在全视图页面上运行此代码段

html，正文{
身高：100%；
保证金：0；
填充：0；
}
.main_包装{
背景色：白色；
显示器：flex；
最小高度：100vh；
弯曲方向：行；
}
.content\u包装{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
侧边栏{
背景颜色：灰色；
flex:0195px；
}
标题.顶栏{
背景颜色：蓝色；
flex:050px；
}
主要{
背景色：白色；
弹性：1；
}
.内容栏{
背景颜色：灰色；
flex:0405px；
}

原型
变量选项={
边界：'主'，
主题：“雪”
};
变量编辑器=新羽毛笔（“#编辑器”，选项）；

使用CSS的

calc（）

函数

编辑器上方的工具栏占用了一些空间，您应该从

.ql容器的底部减少该空间。
.ql工具栏
的高度在不同的屏幕上可能会有所不同

比如：

请看下面的代码片段：


html，正文{
身高：100%；
保证金：0；
填充：0；
}
.main_包装{
背景色：白色；
显示器：flex；
最小高度：100vh；
弯曲方向：行；
}
.content\u包装{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
侧边栏{
背景颜色：灰色；
flex:0195px；
}
标题.顶栏{
背景颜色：蓝色；
flex:050px；
}
主要{
背景色：白色；
弹性：1；
}
.内容栏{
背景颜色：灰色；
flex:0405px；
}
.ql容器{
高度：计算（100%-42px）；
}

原型
变量选项={
边界：'主'，
主题：“雪”
};
变量编辑器=新羽毛笔（“#编辑器”，选项）；
Hmm对我来说，当我以整页模式查看您的代码片段时，它仍然有相同的溢出：（哦，不，对不起，我看到这段代码实际上是有效的，它只是被编辑器代码覆盖了。我将在我的本地原型中测试这一点，并尝试在编辑器创建代码时它不会被覆盖-给我一点时间：）确实有效（我只需要调整css加载队列）！谢谢你的解决方案！我真的很想知道为什么Quill不自己计算这个…@olop01这是我的荣幸！
.ql-container {
  height: calc(100% - 42px); /* 100% - height of 'ql-toolbar' */
}