Quiero crear un área de texto que se expanda o se contraiga para adaptarse al contenido a medida que se cambia el tamaño de la ventana del navegador . Entonces, cuando aumenta el ancho de la ventana del navegador, la altura del área de texto debe disminuir para que sea tan alta como el contenido; cuando el ancho de la ventana del navegador disminuye, la altura del área de texto debe aumentar para mostrar todo el contenido. Esto es lo que tengo ahora, con referencia a las áreas de texto que se expanden con la entrada de contenido:

 var tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;"); window.addEventListener("resize", autoResize(tx[i])); } function autoResize(el) { el.style.height = "auto"; el.style.height = (this.scrollHeight) + "px"; }

¿Cómo hago para que esto funcione?
* Editar: aclarando lo que quiero decir con cambio de tamaño automático
* Edición 2: revisé las preguntas relacionadas, pero todas abordan cómo las áreas de texto cambian de tamaño con la entrada del usuario , mientras que pregunto cómo cambian de tamaño cuando se cambia el tamaño de la ventana del navegador . Soy nuevo en Javascript, así que no sé cómo aplicar estas soluciones a mi problema.