Stop content editable div from growing horizontally

Question

I have an editable div that should not grow horizontally when the text reaches the maximum width, but rather grow vertically. Below is my code and also a gif showing the behavior on Chrome, since in the snippet it does not seem to have the same behavior.

Note that the editable div has a width of 90%, so that the icon is not overlaid by the text. The parent width is not set. Also, note that when I set the width of the editable div to px instead of %, the behavior stops, and suddenly the width is respected. Can someone help me on this? I need the editable text to not overlay the button at the end and not grow horizontally pass a certain % size. Growing vertically is fine. Below is the code:

.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%;
  }

<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>

Answer 1

As stated in the comments section, this seems to be some kind of bug with display: flex. Still a bit unsure why, but setting the

.mfe__prompt_query_form_group {
     display:grid
}

Did the trick. No more overflow. To stop divs, texareas from overflowing the parent, set the parent display to grid.