After exploring various methods for achieving auto-height in a textarea, I decided to go with the contenteditable approach as it seemed cleaner to me. However, while it worked perfectly on its own, it failed when placed within flexbox containers.
I experimented with using max-height and min-height properties in different ways but couldn't find a successful solution. The main issue was that when adding a new line inside the "textarea," the text would overflow outside instead of pushing upwards as desired. Similarly, deleting a line didn't update the element's height properly.
CSS
html, body { height: 100%; }
body {
background: lightgrey;
display: flex;
flex-direction: column;
}
*:focus { outline: 0; }
.app-title {
background: cornflowerblue;
padding: 20px;
}
.tchat-container {
width: 300px;
padding: 20px 0 20px 20px;
margin: 30px auto;
background-color: white;
display: flex;
flex-direction: column;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
section {
overflow-y: auto;
overflow-x: hidden;
}
article {
background: #FDD835;
border-radius: 6px;
padding: 5px;
margin: 5px;
}
.tchat-footer {
display: flex;
padding-right: 20px;
margin-top: 20px;
border: 1px dashed;
}
.autoExpand {
flex: 1;
margin: 0;
background-color: white;
border: 1px solid lightgrey;
padding: 10px;
border-radius: 6px;
}
.autoExpand:focus {
border-color: cornflowerblue;
}
button {
height: 60px;
width: 60px;
border-radius: 50%;
margin-left: 20px;
border: none;
}
.app-footer {
padding: 20px;
text-align: center;
background: black;
opacity: 0.8;
color: white;
}
HTML
<header class='app-title'>APP TITLE</header>
<div class='tchat-container'>
<header>Title</header>
<section>
(list of articles here)
</section>
<footer class='tchat-footer'>
<p contenteditable='true' class='autoExpand' placeholder='Auto-Expanding Textarea'></p>
<button>Send</button>
</footer>
</div>
<footer class='app-footer'>APP FOOTER</footer>
An ideal CSS-only solution proved to be elusive as I couldn't make Chrome, Firefox, and Edge (latest versions) happy.
UPDATE
I finally identified what was missing in my setup:
the class tchat-footer lacked flex: 1 0 auto,
and additionally, a min-height for .autoExpand.
Check out the updated Codepen