I want to create a textarea that expands or contracts to fit the content as the browser window is resized. So when the browser window width increases, the height of the textarea should decrease so that it is as tall as the content; when the browswer window width decreases, the height of the textarea should increase to show all of the content. Here's what I have now, with reference to textareas that expand with content input:

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";
}

How do I get this to work?
*Edit: clarifying what I mean by auto-resize
*Edit 2: I checked related questions but they all address how textareas resize with user input, whereas I'm asking how they resize when the browser window is resized. I'm new to Javascript so I don't know how to apply these solutions to my problem.