While similar questions have been asked before, none of them quite address the specific requirements in my title.
My goal is to create a basic textarea input that automatically adjusts its height based on content, up to a maximum height limit. Once this limit is reached, the input will scroll vertically.
I found a CSS and HTML solution that achieves this, but it has limited browser compatibility and may have bugs. Nevertheless, it demonstrates what I am aiming for.
HTML:
<div contenteditable>
type here...
</div>
CSS:
div[contenteditable] {
border: 1px solid black;
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
width: 200px;
}
Check Out the Working Example Here
Is there an alternative solution that does not rely on contenteditable, but still allows a text input or textarea to replicate the behavior shown above?