Cannot get textarea to be 100% height of remaining DIV space

The problem is that you set the height of textarea to be 100% of its parent. But its parent has height: auto, so its height depends on its contents. That's a recursive definition.

You can solve it by setting an explicit height to that parent, e.g. 100%. But then the sum of heights of the contents of .content would be more than 100%.

If you know the height of the other contents of .content you can use calc().

But if you want a fluid layout, you should can CSS tables.

.content { display: table } .content > div { display: table-row } .content > div:nth-child(2) { height: 100% } 

Additionally, some browsers may require absolute positioning in order to take the textarea out-of-flow and thus avoid a recursive definition of the height.

.content { width: 500px; height: 500px; border: 1px solid blue; display: table; table-layout: fix } .content > div { display: table-row; position: relative; } .content > div:nth-child(2) { height: 100%; /* As much as possible */ } textarea { position: absolute; width: 100%; height: 100%; box-sizing: border-box; }

<div class="content"> <div>text here</div> <div><textarea></textarea></div> <div><input type="button" value="Click Me" /></div> </div>

But better remove the wrapper of textarea and use flexbox:

.content { display: flex; flex-direction: column; } textarea { flex-grow: 1; } 

.content { width: 500px; height: 500px; border: 1px solid blue; display: flex; flex-direction: column; } textarea { flex-grow: 1; }

<div class="content"> <div>text here</div> <textarea></textarea> <div><input type="button" value="Click Me" /></div> </div>

Get the textarea out of div and use flexbox: https://jsfiddle.net/Lqtuprpu/

<div class="content"> <div>text here</div> <textarea></textarea> <div><input type="button" value="Click Me"/></div> </div> .content { width: 500px; height: 500px; border: 1px solid blue; display: flex; flex-direction: column; } textarea { flex-basis: 100%; flex-shrink: 1; width: 100%; box-sizing: border-box; } 

More info about flexbox usage: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There is a simple and sweet trick. Set textarea position as absolute while top and left are 0, then set wrapper div position as relative. That's all.

In this case you are not enforced to set a certain height in px for wrapper

.content { width: 500px; height: 500px; border: 1px solid blue; } textarea { width: 100%; height: 100%; box-sizing: border-box; position: absolute; top: 0; left: 0; } .wrapper{ position: relative; height: calc(100% - 40px); }

<div class="content"> <div style="height: 20px">text here</div> <div class="wrapper"> <textarea></textarea> </div> <div style="height: 20px"><input type="button" value="Click Me"/></div> </div>

or textarea.