Dan Dan -4 years ago 201
CSS Question

TextArea fill remaining height in a div

I have a div that contains a label, a textarea and a button:

<div style="height: 300px;">
<label>Label</label
<textarea/>
<input type="button" value="Save"/>
</div>


and what for the textarea to fill the remaining div.

How can the textarea fill the remaining height without calculating it. If I give height: 100% it gives the textarea a height that is outside the 300px;

EDIT:
I have changed from textbox to textarea as some comments suggested.

Also what I want are the 3 controls to be in a stack one below the other.

Answer Source

A text input can only be single line. Unless you're talking about huge font size, I presume you mean a textarea, which allows multiline text input.

With a flex container, the children will automatically expand to cover the full height of the parent (align-items: stretch default). If you want to disable this full-height feature, you can override it where necessary (as I did on your button).

div {
  display: flex;
  height: 300px;
}

textarea {
  flex: 1; /* consume available width */
}

input {
  align-self: flex-start; /* override flex full-height columns feature */
}
<div>
  <textarea>textbox full height of parent</textarea>
  <input type="button" value="button">
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download