Die Höhe kann nicht dynamisch auf Textbereich festgelegt werden

Question

Ich habe ein Textfeld, in dem die Höhe des Textfelds dynamisch basierend auf der Länge des Textes erhöht wird. Sobald es die Höhe von 200px erreicht, erscheint der Scoll. Irgendwie kann ich die Höhe nicht verringern, wenn ich den Text lösche, nachdem Rolle angezeigt wird. Die Höhe bleibt konstant, obwohl der Inhalt nicht vollständig belegt ist.

Ich versuche, mit dem Textarea (dynamisch) in https://www.intercom.com/ Chat übereinstimmen.

HTML & JS

<div class="container"> 
     <textarea placeholder="Text goes here..." onkeydown="expand(this)" onkeyup="expand(this)"></textarea> 
    </div> 
    <script> 
     function expand(element) { 
     if (element.scrollHeight < 200) { 
      element.style.height = "0px"; 
      element.style.height = (element.scrollHeight) + "px"; 
     } else { 
      element.style.height = "200px"; 
      element.style.overflowY = "auto"; 
     } 
     } 

    </script> 

CSS

.container { 
    min-height: 16px; 
    max-height: 200px; 
    width: 300px; 
} 

.container textarea { 
    max-height: none; 
    max-width: none; 
    min-height: 0; 
    min-width: 0; 
    color: #565867; 
    background-color: #f4f7f9; 
    resize: none; 
    //border: none; 
    overflow: hidden; 
    font-size: 14px; 
    width: 100%; 
    height: 100%; 
} 

Fiddle here

Answer 1

Ändern Sie den folgenden Code, damit es funktioniert

.container { 
    min-height:18px; 
    max-height: 200px; 
    width: 300px; 
} 

in

.container { 
    height:18px; 
    max-height: 200px; 
    width: 300px; 
}