It is possible to expand a textarea only with CSS?

Question

I have a textarea with 200px of height, but when I pass that 200px with text I want to have the textarea expanded instead of keeping the 200px of height with a scroll bar.

It is possible to do that only with CSS?

Answer 1

Instead of textarea , you can use div with contentEditable attribute:

div {    display: inline-block;    border: solid 1px #000;    min-height: 200px;    width: 300px;  }

<div contentEditable="true"></div>

DEMO

Answer 2

It is possible to make a textarea expandable by the user, using just CSS. In fact, in some modern browsers, such expandability is even the browser default. You can explicitly ask for it:

textarea { resize: both; } 

Browser support is growing but is still limited.

There is typically just a small hint about resizability: a resize handle in the lower right corner. And I’m afraid most users won’t understand this hint.

You cannot make a textarea expand automatically by content using just CSS.