How to autogrow textarea with CSS3?

13 points
Created by:

It is not possible to enable autogrowing for textarea with CSS3 and earlier versions.

Hint: read this article how to do it with JavaScript.

 As alternative contenteditable attribute with div element can be used.

// ONLINE-RUNNER:browser;

<!doctype html>

    .textarea {
      border: 1px solid silver;
      width: 300px;
      min-height: 20px;
      max-height: 200px;   /* optional */
      overflow-x: hidden;
      overflow-y: auto;

  <div class="textarea" contenteditable="true"></div>
Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.