Is there anyway to have a textarea “autofit” height based on the content at page load?

Question

Is there anyway through CSS or Javascript set the height of the textarea based on the content? I have a hardcoded height in my CSS but i wanted it to default so there is no

Answer 1

This other question about WhatsApp like input has been incorrectly marked as a duplicate of this current question. As I cannot answer there, I'm answering it here.

I was trying to create a WhatsApp like input area, with the following features:

1. The div/textarea should expand upwards when the content exceeds 4em
2. Max height of the div/textarea should be 6em
3. The messaging area (above the div/textarea) should reduce i.e. its scrollbar thumbtack size should change.

Here is my pure CSS solution, if anyone is looking for it (like I was a few minutes ago).

.arena {
  position: absolute;
  height: 20em;
  width: 12em;
  background-color: #efefef;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.messages {
  padding: 0.2em;
  height: 5em;
  flex: 1 1 0;
  overflow: auto;
}
.content {
  background-color: teal;  
  height: 20em;
}
.footer {
  position: relative;
  background-color: #cdcdcd;
  padding: 0.2em;
}
.editable {
  outline: none;
  max-height: 6em;
  min-height: 4em;
  overflow: auto;
  width: 80%;
  background-color: #fff;
}