无法调整文本区域高度

Question

I've noticed a strange bug while using a textarea in a my project.
At first I thought there was a problem in my code but then I was able to replicate that bug extracting the essenial in a JsFiddle .

The problem is:
If I change the height of the textarea by code without any interactions from the user before, the height get stuck at that size.
For example, if you click to the button "Change size" (in the jsfiddle above) and then try to resize back to the initial size using the element grip (at the bottom-right corner), you can't. It's like if that new height is the new ''minimum allowed size'' of the textarea .

---

What am I doing wrong? what am I missing?
Thank you in advance.

Answer 1

Height overrides min-height in Chrome.

In older versions of chrome there was no restriction.

So if you use height min-height will be your height. So you need to set min-height and max-height only. Height overrides min-height in Chrome.

textarea{
  max-height: auto;
  min-height: 50px;
  resize: both;
}

Okay this solution works for me ( chrome Version 47.0.2526.111 m ): https://jsfiddle.net/ezsz8xr5/9/

I found this interestining link: https://code.google.com/p/chromium/issues/detail?id=94583

Seems that it is a known issue.

Answer 2

I know this question has been asked a while ago, but there's no good answer to it, and I found a solution.

What I found is that putting a % height for the textarea will not change it according to its parent.

If you put the rule resize: vertical , changing manually the height you'll notice that your browser will put the style.height in pixels .

So I tried putting height: 150px and it worked.

So here are two solutions :

1. First, put your textarea's height in pixels , not in percentage.

parent {
    width: 150px;
}

parent textarea {
    height: 100%; /* not working ! */
}

/* Instead, do : */

/* css variable */
:host {
    --height: 150px;
}

parent {
    height: var(--height);
}

parent textarea {
    height: var(--height);
}

For a SCSS way :

parent {
    $height: 150px;

    height: $height;

    textarea {
        height: $height;
    }
}

1. Second, declare the textarea parent's display as flex , and without any additional rule, it will automatically resize your textarea. If it does not, then do this :

parent {
    display: flex;
    /* if flex doesn't work by itself, add this + textarea rule : */
    flex-flow: column nowrap;
}

parent textarea {
    flex: 1; /* tells the textarea to fit all the free space it finds */
}

It seems like a browser issue yes, still not fixed in 2022, sadly. If it is intentional, then it's even not documented.

Hope this will help someone in the future.