<div class="container">
<div class="yellow"></div>
<textarea></textarea>
</div>
.container {
display: inline-flex;
width: 200px;
height: 400px;
flex-direction: column;
border: 10px solid red;
}
.yellow {
background: yellow;
flex-grow: 1;
}
textarea {
background: #47f;
line-height: 20px;
resize: none;
}
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', function() {
const maxHeight = 300;
const height = 20 * this.value.split('\n').length;
this.style.height = `${Math.min(height, maxHeight)}px`;
});
textarea.dispatchEvent(new Event('input'));
Простой
