无法使用angular flex布局设置ngx-quill编辑器的高度

Question

无法使用angular flex布局设置ngx-quill编辑器的高度。

编辑器的高度(灰色边框)溢出了父div (红色背景)。

stackblitz

如何确保编辑器留在父div中？

Answer 1

解决方案：由于某些原因，所有的在线解决方案都不起作用。说了一些关于“不安全的设置样式”的东西，但它们甚至都不适用。

这个解决方案覆盖了Angular中的羽毛笔文本区域(你可以选择任何CSS文件，我只是希望我所有的羽毛笔编辑器都是相同的大小)

src/styles.scss

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

Answer 2

使用最新的quill和ngx-quill，并假设您可以使用::ng-deep，这是可行的：

::ng-deep .ql-editor {
    height: 300px;
}

Answer 3

解决方案是覆盖ql-container类中的height -

.ql-container {
  height: auto;
}

github link