Рассмотрим следующую страницу, на которой отображается строка текста с <textarea>
под ней.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.outer {
background-color: #eee;
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
}
.expand {
flex-grow: 1;
}
textarea {
height: 100%;
width: 100%;
}
<div class="outer">
<p>
Nice little wall of text.
</p>
<div class="expand">
<textarea></textarea>
</div>
</div>