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

Question

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

编辑器的高度（灰色边框）溢出父 div（红色背景）。

堆栈闪电战

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

Answer 1

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

此解决方案覆盖 Angular 中的 quill 文本区域（您可以选择任何 CSS 文件，我只是希望我所有的 Quill 编辑器都具有相同的大小）

src/styles.scss

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

Answer 2

使用最新的quilland ngx-quill，并假设您可以使用::ng-deep，这有效：

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

Answer 3

height解决方案是在ql-container课堂上覆盖-

.ql-container {
  height: auto;
}

github链接

Answer 4

问题height: 100%来自ql-container导致溢出的类。

只需将以下 css 添加到您的代码中，它将覆盖 quill 样式

.ql-container {
  min-height: 10rem;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ql-editor {
  height: 100%;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}