textarea resizes width but not height, why?

In this case it turned out there was a "min-height" property tucked away for textareas in forms. Apparently the inline styling setting of height does not override the min-height property from the CSS file.

If you're using an inline style tag, it will take priority over your CSS styling.

The height property works as expected: JSfiddle here.

You can also set the height by using the rows attribute on the textarea if you have an expected number of lines to be used.

<textarea name='text' spellcheck="true" id="wider" rows="5"></textarea>

You can use javascript to resize dimentions of textarea as soon as some parent element changes its own, for instance, height. You are going to call the functios (ES6 Javascript version):

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

  document.querySelectorAll(someTextareaSelector)[0].style.height = 
    document.querySelectorAll(someParentElementSelector)[0]
    .getBoundingClientRect().height + "px"

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)

Disclaimer: I can only offer a guess as to why this works, but it works in my wordpress ... I pulled my hair out trying to get the textarea to respond to the css "height: auto" adjustment. By accident, while trying to put in an "oninput=" javascript suggestion from "Moussawi7" [see question https://stackoverflow.com/questions/17772260/textarea-auto-height] which I couldn't get to work, I added a js listener tied to a <textarea id="auto-open"[id name not important]> to wait for the DOM to load.

Long story short, with the DOM Listener keyed to an id for a textarea, apparantly the browser waits for the DOM to finish loading before the browser finishes setting all the attributes for the text area (this is my 100% guesswork). But presto! suddenly the textarea sized itself to the content withOUT a css "height: " setting at all. This is just what I wanted.

Here was that first js code, css, and html

js 
function auto_grow() {
  var element = document.getElementById('auto-grow');
// note: function does NOTHING!!!
console.log("inside auto_grow") // msg shows in cons after page loads
}
document.addEventListener('DOMContentLoaded', function () {
  auto_grow(); 
});

css
.gw-input-content {
  resize: none;
  width: 100%;
  box-sizing:border-box;
  margin-top: .5rem;
  white-space: pre-line; /* removes 1st line text indent in firefox */
  text-wrap: pretty;  /* removes 1st line text indent in chrome */
  overflow: hidden;
}

html
<textarea id="auto-grow" 
class="gw-input-content">
  <?php echo esc_textarea(wp_strip_all_tags(get_the_content()));

?>

Credit where credit is due, chatGPT3.5 then suggested I add another listener inside the DOM listener for textarea input and add Moussawi7's suggestion for expanding the height with a js style.height setting when the user types text which wraps to a new line or hits enter to add a new line. (I had asked chat to help me get Moussawi7's function working in my page.) No changes to the above css or html were needed. Now the textarea expands one line at a time as the user's typing adds new lines.

function auto_grow() {
  var element = document.getElementById('auto-grow');
  element.style.height = "5px";  // Initial height
  element.style.height = (element.scrollHeight) + "px";
}
document.addEventListener('DOMContentLoaded', function () {
  auto_grow();    
  var textarea = document.getElementById('auto-grow');
  textarea.addEventListener('input', auto_grow);  // Call the function on input
});

It's an old one, but if someone still looks for this, try display: inline-table;