HTML with contenteditable="true" attribute width not static

Question

I wanted to create a textarea with html-elements inside it. So I found this article.

So I created a div-element with contenteditable="true" attribute.

#call-text-form {
  height: calc(100vh - 350px);
  width: calc(100% - 90px) !important;
}

#call-text-form-textarea {
  margin-top: 5px;
  height: calc(100vh - 405px);
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto;
}

<div class="form-control center-horizontally" id="call-text-form">Test
  <hr style="margin: 0 -12px">
  <div contenteditable="true" id="call-text-form-textarea">f</div>
</div>

But if I enter text into it, which doesn't fit into the div, the width expands proportionally to the entered text. If it occurs vertically, then the height stays fixed and the scrollbar appears.

If I set the width to a fixed value (like 50px) the width stays fixed, but I don't want to limit the width to a fixed value.

So, does somebody has an idea, how to solve this problem? Thanks.

Answer 1

The solution was max-width: 100vh.

Thanks to the helpers