Сергей Ракипов,
по запросу из инета первые варианты ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
textarea {
resize: none;
overflow: hidden;
min-height: 24px;
}
</style>
<script>
function auto_grow(element) {
element.style.height = "5px";
element.style.height = (element.scrollHeight) + "px";
}
</script>
</head>
<body>
<textarea oninput="auto_grow(this)" rows="2"></textarea>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*,
*::before,
*::after {
box-sizing: border-box;
}
.input-sizer {
display: inline-grid;
position: relative;
border: solid 1px;
}
.input-sizer.stacked {
align-items: stretch;
}
.input-sizer.stacked::after,
.input-sizer.stacked textarea {
width: auto;
min-width: 1em;
grid-area: 1/2;
font: inherit;
padding: 0.25em;
margin: 0;
resize: none;
background: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
}
.input-sizer::after {
content: attr(data-value) " ";
visibility: hidden;
white-space: pre-wrap;
}
.input-sizer:focus-within textarea:focus,
{
outline: none;
}
</style>
</head>
<body>
<label class="input-sizer stacked">
<textarea oninput="this.parentNode.dataset.value = this.value" rows="2" placeholder="hi"></textarea>
</label>
</body>
</html>