TextArea fill remaining height in a div

Question

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.

By textbox you mean the text input ? – DaniP Mar 23 '17 at 14:08 — DaniP, Mar 23 '17 at 14:08
rewrite your code it is somewhat ambigious – Birhan Nega Mar 23 '17 at 14:08 — Birhan Nega, Mar 23 '17 at 14:08
go through calc property of css – Anshul Mar 23 '17 at 14:09 — Anshul, Mar 23 '17 at 14:09

score 6 · Accepted Answer · edited May 23 '17 at 12:17

6

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>

edited May 23 '17 at 12:17

Community

1
1

answered Mar 23 '17 at 14:10

Michael Benjamin

346,931
104
581
701

This is a better solution than mine. – zik Mar 23 '17 at 14:11
The button seems to be next to the input, instead of below – Dan Mar 23 '17 at 14:34
1

That's correct, because that's the way you had it set up in your question. Simply add `flex-direction: column` to the `div`, and the items will stack vertically. – Michael Benjamin Mar 23 '17 at 14:37

TextArea fill remaining height in a div

1 Answers1

Linked