Position element at the bottom with prior element filling up height - html

Question

First div should fill up remaining height that's left while second div should be positioned at the bottom with it's initial height.
DEMO:
.container {
width: 240px;
height: 400px;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>

Answer 1

The answer to this would vary from markup to markup, but in your case you can just add this to your first element:
height: 100%;
This works because of your flex display property of the container. A different property on the container would likely require another solution.
Demo
Full code
.container {
width: 240px;
height: 400px;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
height: 100%;
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>

Answer 2

You need to make height auto to container class so depend on length of string your height is increase.
<style>
.container {
width: 240px;
height: auto;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
</style>
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>