自动调整具有平滑高度过渡的可满足元素

Question

现有问题不包括此案例。当文本创建更多行时，高度转换不起作用。这可能是因为我没有设置高度，但我不想根据文字大小不断改变它。如何创建平滑过渡效果？

.content{
    border: 1px solid blue; 
    min-height:30px; 
    width:120px;
    transition:  height 1s ease;
 }

 <div contenteditable="true" class="content">Type more...</div>