如何阻止contenteditable div横向扩展，仅允许纵向增长？

我有一个带contenteditable属性的div，需求是当文本达到最大宽度时，它不应横向扩展，而应纵向增长。当前在Chrome浏览器中出现了横向扩展的问题（代码片段无法复现该行为）。

注意：

• 该可编辑div的宽度设置为90%，目的是避免文本覆盖右侧按钮；其父元素未设置宽度。
• 若将该div的宽度设置为px单位而非%，则宽度会被正确识别，横向扩展的问题不再出现。

需求：实现可编辑文本不覆盖末尾按钮，且不超过指定百分比宽度，仅允许纵向增长。

原代码如下：

原CSS代码 #

.mfe__prompt_query_container .mfe__prompt_query_form_group {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid #7e7e7e;
    margin-bottom: 5px;
  }
  
  .mfe__prompt_query_container .mfe__prompt_query_form_group .mfe__prompt_query_editable_text_area{
    width: 90%;
    padding: 10px;
    min-height: 50px;
    overflow: auto;
  }
  
   .mfe__prompt_query_container .mfe__prompt_query_form_group .mfe__prompt_query_editable_text_area button {
position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 100%;
  }

原HTML代码 #

<div class="mfe__prompt_query_container">
      <p class="dds__subtitle-2">Prompt</p>
      <div class="mfe__prompt_query_form_group">
        <div
          class="mfe__prompt_query_editable_text_area"
          contentEditable
          autoFocus
          data-text="Write your prompt, select Content Type"
        ></div>

        <button
          color="editorial-light"
          title="Submit button"
          type="submit"
        >Button</button>
      </div>
      <p class="dds__caption dds__text-muted">
        Write your own prompt, select guided options or paste a draft below
      </p>
    </div>

问题核心在于flex容器无明确宽度基准，导致百分比宽度计算异常，同时CSS选择器错误导致按钮定位样式未生效。以下是修正后的代码及关键调整说明：

修正后CSS代码 #

.mfe__prompt_query_container .mfe__prompt_query_form_group {
    display: flex;
    align-items: flex-start;
    position: relative;
    border: 1px solid #7e7e7e;
    margin-bottom: 5px;
    width: 100%; /* 给父容器设置宽度基准 */
}

.mfe__prompt_query_container .mfe__prompt_query_form_group .mfe__prompt_query_editable_text_area {
    width: 90%;
    padding: 10px;
    min-height: 50px;
    overflow: auto;
    box-sizing: border-box; /* 让padding包含在宽度内，避免总宽度超出90% */
    overflow-wrap: break-word; /* 强制长文本/单词换行，防止横向溢出 */
}

/* 修正按钮选择器，按钮是form_group的直接子元素 */
.mfe__prompt_query_container .mfe__prompt_query_form_group button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
}

修正后HTML代码 #

<div class="mfe__prompt_query_container">
      <p class="dds__subtitle-2">Prompt</p>
      <div class="mfe__prompt_query_form_group">
        <div
          class="mfe__prompt_query_editable_text_area"
          contentEditable
          autoFocus
          data-text="Write your prompt, select Content Type"
        ></div>

        <button
          color="editorial-light"
          title="Submit button"
          type="submit"
        >Button</button>
      </div>
      <p class="dds__caption dds__text-muted">
        Write your own prompt, select guided options or paste a draft below
      </p>
</div>

关键调整说明 #

1. 父容器添加width: 100%：让父容器继承上级可用宽度，为子元素的90%宽度提供计算基准。
2. 修正按钮CSS选择器：原选择器错误指向可编辑div的子元素，修正后按钮的绝对定位样式正常生效，避免文本覆盖按钮。
3. 添加box-sizing: border-box：将padding包含在元素宽度内，确保可编辑div实际宽度不超过90%。
4. 设置overflow-wrap: break-word：强制长文本或长单词自动换行，彻底避免横向扩展。
5. 调整align-items: flex-start：防止flex容器高度被按钮限制，确保可编辑div能自由纵向增长。

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