Html 如何创建像Twitters Tweet box这样的响应文本区

我如何使用html/css/js制作这样的框

我希望它自动调整大小，直到达到特定的行数，然后激活滚动

看看这个例子，这就是你要找的

$（'#联系人表单'）。在（'change keydown keyup paste cut'，'textarea'，function（）{
$（this.height（0.height）（this.scrollHeight+2）；
如果（$（this）.height（）>=300）{
$（'textarea#message'）.css（“溢出”、“自动”）；
}
否则{
$（'textarea#message'）.css（“溢出”、“隐藏”）；
}
}).find（'textarea#message'）.change（）
正文{
背景：浅蓝色；
显示器：flex；
柔性流：包裹柱；
证明内容：中心；
对齐内容：居中对齐；
文本对齐：居中；
利润率：10%自动；
溢出：隐藏；
最大宽度：50%；
最大高度：50%；
}
文本区{
边界：0无；
溢出：隐藏；/*溢出使用JS在最大高度设置为自动*/
背景：浅青色；
字体系列：无衬线；
大纲：无；
最小高度：100px；
最大高度：314px；
高度：自动；
调整大小：无；
宽度：50%；
}
h1{
字体系列：无衬线；
字体大小：150%；
字号：600；
明确：两者皆有；
}
h3{
字体系列：无衬线；
字体大小：90%；
字体大小：400；
明确：两者皆有；
文本对齐：左对齐；
利润率：10px自动；
}

使用最大高度自动调整文本区域大小
当文本到达textarea的底部时，textarea会扩展。当textarea达到最大高度时，会出现一个滚动条。删除文本时，textarea会缩小。
此外，如果其他人要使用此功能，请记住将javascript放在“联系人表单”div下