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