Остановить редактируемый контент div от горизонтального роста ⇐ CSS

[Anonymous]

У меня есть редактируемый элемент div, который не должен расти по горизонтали, когда текст достигает максимальной ширины, а должен расти по вертикали. Ниже приведен мой код, а также GIF-изображение, показывающее поведение в Chrome, поскольку во фрагменте оно не выглядит таким же.

Обратите внимание, что редактируемый элемент div имеет ширину 90 %, поэтому значок не перекрывается. по тексту. Родительская ширина не установлена. Также обратите внимание, что когда я устанавливаю ширину редактируемого элемента div на px вместо %, поведение прекращается, и внезапно ширина учитывается. Может ли кто-нибудь помочь мне в этом? Мне нужно, чтобы редактируемый текст не накладывался на кнопку в конце и не увеличивался по горизонтали до определенного% размера. Вертикальный рост — это нормально. Ниже приведен код:

Код: Выделить всё

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

Код: Выделить всё

Prompt



Button


Write your own prompt, select guided options or paste a draft below

Подробнее здесь: https://stackoverflow.com/questions/781 ... rizontally