fit container to the content of contentEditable div

Question

I'm trying to make draggable div that has text inside which can be edited.

But for fixed height and width, container div don't fit to the content of editableContent div.

Setting .container height to auto , working fine, but I want it to be resizable so, it won't work.

Also I tried using JavaScript to set container height by counting every line break of editableContent div, but when I don't press enter it doesn't count as <br>

I'd really appreciate any guidance.

 .container { position: absolute; top: 50px; left: 50px; height: 150px; width: 200px; border: 1px solid green; display: flex; box-sizing: border-box; } .content { width: auto; height: auto; word-break: break-all; white-space: break-spaces; flex: 1 }

 <div class="container"> <div class="content" contentEditable></div> </div>

Answer 1

you can use textarea property.

 .container { position: absolute; top: 50px; left: 50px; height: 150px; width: 200px; border: 1px solid green; display: flex; box-sizing: border-box; } .content { width: auto; height: auto; word-break: break-all; white-space: break-spaces; flex: 1 }

 <textarea class="container"> <textarea class="content"></textarea> </textarea>