Div width/height 100% of the free space inside another div - html

Question

#external
{
background-color: #585858;
width: 200px;
height: 200px;
}
#internal
{
background-color: #111858;
width: 50px;
height: 100%;
}
<div id="external">
content 1
<div id="internal"></div>
</div>
In this case, how can I set a remnant height of external div to the internal div?
The problem is when I set 100% height to internal div, so internal height == external height.

Answer 1

Your request is a little unclear but flexbox can do what I think you are after.
p {
margin: 0;
}
.external {
background-color: rgba(255, 0, 0, 0.5);
width: 200px;
height: 200px;
display: inline-flex;
flex-direction: column;
margin: 10px;
}
.internal {
background-color: #111858;
100%;
flex: 1;
}
<div class="external">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="internal"></div>
</div>
<div class="external">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum quia tempore! Sit, laboriosam, quam.</p>
<div class="internal"></div>
</div>

Answer 2

use this may help u
<style>
#external
{
background-color: #585858;
width: 200px;
height: 200px;
}
#internal
{
background-color: #111858;
width: 50px;
height: calc(100% - 20px);
}
.content
{
height:20px;
}
</style>
<div id="external">
<div class="content">content 1</div>
<div id="internal"></div>
</div>