Make child div occupy 100% height - html

Question

I want to make the child div .status be at the height of 100% the .container.
The problem is that that I can't specify an exact height for the .container div, because it must have a dynamic height.
Here is the JSFiddle
Here is the code:
.container {
width: 100%;
background-color: red;
float: left;
box-sizing: border-box;
}
.progress {
float: left;
width: 5%;
background-color: green;
height: 100%;
box-sizing: border-box;
margin: 5px;
}
.content {
float: left;
width: 80%;
background-color: #f2f2f2;
height: 100%;
box-sizing: border-box;
margin: 5px;
}
.status {
position: relative;
float: left;
width: 10%;
background-color: #c2c2c2;
height: 100%;
box-sizing: border-box;
margin: 5px;
}
.priority {
position: relative;
height: 20px;
top: 5%;
background-color: #a2a2a2;
}
.prog {
position: absolute;
width: 100%;
height: 20px;
bottom: 5px;
background-color: #d2d2d2;
}
<div class="container">
<div class="progress">
</div>
<div class="content">
<h2>
Some Content Text.... Some Content Text....Some Content Text....
Some Content Text....Some Content Text....
</h2>
</div>
<div class="status">
<div class="priority">
</div>
<div class="prog">
</div>
</div>
</div>

Answer 1

Flexbox can do that.
* {
box-sizing: border-box;
}
.container {
width: 100%;
background-color: red;
display: flex;
}
.progress {
width: 5%;
background-color: green;
margin: 5px;
}
.content {
width: 80%;
background-color: #f2f2f2;
margin: 5px;
}
.status {
position: relative;
width: 10%;
background-color: #c2c2c2;
margin: 5px;
display: flex;
flex-direction: column;
}
.priority {
position: relative;
height: 20px;
width: 100%;
background-color: blue;
}
.prog {
margin-top: auto;
width: 100%;
height: 20px;
background-color: pink;
}
<div class="container">
<div class="progress"></div>
<div class="content">
<h2>
Some Content Text.... Some Content Text....Some Content Text....
Some Content Text....Some Content Text....
</h2>
</div>
<div class="status">
<div class="priority"></div>
<div class="prog"></div>
</div>
</div>