https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/

Chris Coyier Archives Timeline
Dark Mode? [*]
  
September 29, 2023

CSS Solves Auto-Expanding Textareas (Probably, Eventually)

I'll cut to the chase before I type too many more words:

textarea {
  form-sizing: normal;
}Code language: CSS (css)

I came across it via an Amit Merchant blog post. Then followed the
thread a little. It all started with a discussion, as these things
tend to in this modern world. I think it's a super weird name choice,
but I'm sure if you were super involved in that discussion it would
all make sense.

I was surprised to see it already in Chrome Canary with the "web
experiments" flag enabled. Of course Adam is all over it:

So useful, good job CSS.

Who knows when that will be usable across all browsers, or if it will
definitely ship just like that. I tend to agree with Lea Verou
earlier in the discussion that height: max-content feels like a very
elegant choice, but I'm not privy to why they didn't go that way.
Also like Lea, if this opens the door for horizontally growing
single-line inputs, that's a win.

My favorite trick of doing this before was using CSS grid. You'd take
the text inside the textarea and propagate it to a hidden psuedo
element overlaid exactly on top. That stack technique is a classic:

.grid {
  display: grid;
  grid: stack;
  > *, &::after {
    grid-area: stack;
  }
}Code language: CSS (css)

CodePen Embed Fallback

Credit to Stephen Shaw on the original idea for that.

Related



CodePen

I work on CodePen! I'd highly suggest you have a PRO account on
CodePen, as it buys you private Pens, media uploads, realtime
collaboration, and more.

Get CodePen PRO

One response to "CSS Solves Auto-Expanding Textareas (Probably,
Eventually)"

 1. Colin Walker says:
    09/30/2023 at 2:38 am

    Love this, and it's about time. Even if it only gets wider
    support in Chromium based browsers (that's what I generally use)
    then it will mean I can rip out an ugly JavaScript solution to do
    the same thing on my posting form.

    Will watch with interest.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked 
*

          [                                             ]
          [                                             ]
          [                                             ]
          [                                             ]
          [                                             ]
          [                                             ]
          [                                             ]
Comment * [                                             ]

Name * [                              ]

Email * [                              ]

Website [                              ]

[Post Comment] 

 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
D[                                             ] 

[Chris Coyier        ] Chris Coyier is my name and I live in Bend,
Oregon with my family. I like to put it down here in the footer so
you have an easy place to copy and paste it from when you're writing
flattering things about me.

chriscoyier@gmail.com -- Email is good -- RSS
CodePen -- Mastodon -- GitHub -- Instagram - X - Threads - Bluesky
Bend: Smashburgers -- Breakfast Burritos
Back to Top [?]