如何解决React Quill编辑器输入长文本时自动扩容而非滚动的问题

问题触发原因 #

该问题由两个特性共同导致：

• flex布局的子项默认min-height: auto规则，会自动撑开容器适配子内容，不会主动收缩限制内容高度
• React Quill默认编辑区无高度限制，会随内容长度自动撑高

修复步骤 #

1. 调整flex布局容器规则 #

首先确保flex父容器有明确的高度限制，再给直接包裹Quill的flex子项添加min-height: 0规则，覆盖默认的auto值，允许容器被限制在父flex容器的高度范围内：

/* 外层flex父容器 */
.flex-container {
  display: flex;
  height: 400px; /* 必须设置明确的高度值 */
}
/* 直接包裹Quill编辑器的flex子项 */
.quill-wrapper {
  flex: 1; /* 如需占满flex剩余空间则添加该规则 */
  min-height: 0; /* 核心修复规则，覆盖flex项默认的min-height: auto */
  display: flex;
  flex-direction: column;
}

2. 配置Quill编辑器滚动规则 #

给Quill组件的内置类添加样式，让编辑区占满父容器高度，内容溢出时自动出现滚动条：

/* Quill根容器 */
.quill {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Quill编辑区容器 */
.ql-container {
  flex: 1;
  overflow-y: auto;
}

修改完成后输入或粘贴大量文本时，编辑器不会超出父容器高度，会在编辑区自动出现纵向滚动条。

内容的提问来源于stack exchange，提问作者Elcid_91