While this question may have been asked previously without a satisfactory answer, I have stumbled upon a solution that seems to work.
Upon experimenting, I discovered that setting a percentage height for the textarea does not adjust according to its parent container.
By using the CSS rule resize: vertical, you can manually adjust the height, but your browser will interpret it in pixels.
My workaround involved simply setting height: 150px, which successfully resolved the issue.
Here are two potential solutions:
- To avoid sizing issues, specify the height of the textarea in pixels rather than percentages.
parent {
width: 150px;
}
parent textarea {
height: 100%; /* won't work as expected */
}
/* Instead, use : */
/* css variable */
:host {
--height: 150px;
}
parent {
height: var(--height);
}
parent textarea {
height: var(--height);
}
If you prefer a SCSS approach:
parent {
$height: 150px;
height: $height;
textarea {
height: $height;
}
}
- Another method involves declaring the textarea parent's display property as flex. By default, this should automatically resize the textarea. If not, try the following:
parent {
display: flex;
/* if flex alone doesn't work, include this + textarea rule : */
flex-flow: column nowrap;
}
parent textarea {
flex: 1; /* instructs the textarea to occupy all available space */
}
It appears that this behavior could be browser-dependent and remains unresolved as of 2022. Unfortunately, the reason behind it is not clearly documented.
I hope this information proves useful to someone facing similar challenges in the future.