HTML with contenteditable="true" attribute width not static-CodePudding

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

CodePudding user response：

By default the div will take the entire width of View Port since it's a block element. So you need to update your CSS as below

#call-text-form-textarea {
  margin-top: 5px;
  height: calc(100vh - 405px);
  width: fit-content;
  overflow-y: auto;
}

notice that we're using 'width: fit-content;' what this will do is keep the width of the div equivalent to the content in it. Hope this helps

Please find a working pen for the same below Codepen

[UPDATED SOLUTION]

You can use max-width as below

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

You may use word-break property

#call-text-form-textarea {
      margin-top: 5px;
      height: calc(100vh - 405px);
      width: fit-content;
      word-break: break-word | break-all;
      overflow-y: auto;
    }

CodePudding user response：

The solution was max-width: 100vh.

Thanks to the helpers