Make a <textarea> fill remaining height

Question

I learned from this question how to make an HTML element fill the remaining height of a container. But it doesn't seem to be working with <textarea>. This Fiddle compares the effects of display: table-row on a <textarea> and a <div>:

http://jsfiddle.net/b4Tt8/2/

Why the difference, and how can I get the appropriate effect on the textarea?

Answer 1

You can use flexbox to set your textarea height according to its parent.

HTML

<div class="container">
  <div class="btn-wrapper">
    <button>X</button>
  </div>
  <textarea></textarea>
</div>

CSS

.container {
  height: 220px;
  width: 220px;
  background-color: pink;
  display: flex;
  flex-direction: column; 
 } 

.container textarea {
  box-sizing: border-box; /* fit parent width */
  height: 100%;
}

jsFiddle

Answer 2

Why are you using display: table-row; declarations ? There is no need for this. Remove the display: table-row; declarations, add a box-sizing: border-box; declaration to your textarea selector and you're all set :

.container
{
    height: 220px;
    width: 220px;
    background-color: pink; 
}

.container > textarea
{
    width: 100%;
    height: 100%;
    background-color: cyan;
    box-sizing: border-box;
}

.container > div
{
    width: 100%;
    height: 100%;
    background-color: cyan;
}

Fiddle

EDIT :

The CSS above makes the text area overflowing its parent div.

Here is an updated answer :

HTML

<div class="container">
    <div class="button-wrapper">
        <button>X</button>
    </div>
    <div class="textarea-wrapper">
        <textarea></textarea>
    </div>
</div>

CSS 2

.container {
    height: 220px;
    width: 220px;
    background-color: pink;
    position: absolute;
}
.container textarea {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 0, 0.5);
    box-sizing: border-box;
}
.container > div {
    background-color: cyan;
}
.container .button-wrapper {
    background-color: yellow;
    height: 26px;
}
.container .textarea-wrapper {
    background-color: green;
    position: absolute;
    top: 26px;
    width: 100%;
    bottom: 0;
}

CSS 3 (using calc function)

.container {
    height: 220px;
    width: 220px;
    background-color: pink;
}
.container textarea {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 0, 0.5);
    box-sizing: border-box;
}
.container > div {
    background-color: cyan;
}
.container .button-wrapper {
    background-color: yellow;
    height: 26px;
}
.container .textarea-wrapper {
    background-color: green;
    height: calc(100% - 26px);
}

Here are fiddles that shows both solutions :

CSS 2

CSS 3