The existing questions do not cover this case. Height transition is not working when the text creates more rows. That's probably because I set no height, but I want't to keep changing it according to the text size. How can I create a smooth transition effect?
.content{
border: 1px solid blue;
min-height:30px;
width:120px;
transition: height 1s ease;
}
<div contenteditable="true" class="content">Type more...</div>