Absolute DIV taking all remaining height - html

Question

I'm stacked with CSS, trying to give to an absolute positioned <div> the remaining height from where it starts.. Let me explain better with this snippet:
#main {
background-color: yellow;
}
#container {
display: grid;
position: relative;
grid-template-rows: auto auto;
}
#child_1 {
background-color: red;
grid-row: 1 / 2;
height: 100px; // this can vary
}
#child_2 {
background-color: green;
grid-row: 2 / 3;
height: 77px; // this can vary
}
#child_3 {
width: 100%;
position: absolute;
top: 100%;
background: lightblue;
}
<div id="main">
<div id="container">
<div id="child_1">CHILD 1</div>
<div id="child_2">CHILD 2</div>
<div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
<div id="something-else">
Something that is <br />
behind <br />
the absoolute <br />
div <br />
</div>
</div>
As you can see, div#child_3 starts right after div#child_2 (this is a constraint, I do want this), and I also want it to be position: absolute because it must cover anything else that may be on the screen (basically, I will have a JS handler that show/hide div#child_3, and when it is shown, it should cover #something-else).
What I would like to achieve is that div#child_3 takes all the height, from where it starts, to the end of the viewport.. To make it clearer, look at this image:
The difficult part is that.. I would like to achieve this only with CSS!
Because the only solution I've found so far is to set a fixed height to div#child_3, by granting him (100vh - div#child_3.getBoundingBoundRect().Top), and setting a ResizeObserver to cover the case in case in which the window got resized.
By the way, notice I cannot set a fixed height: calc(100vh - 177px) because, as written in CSS code, the div#child_1 and div#child_2 heights may vary.
Moreover, the div#main should not be touched: I can only work on div#container and its children, because they are part of a separate component (this example is simplified).

Answer 1

If there is no reason for any of the children to have their position set to absolute then this layout could be achieved with flexbox. Please see the snippet below for an example:
.parent {
height: 100vh;
/* Important styles below */
display: flex;
flex-flow: column wrap;
}
.child {
background: blue;
}
.child:nth-of-type(even) {
background: red;
}
.child--large {
/* Important styles below */
flex: 1;
}
<div class="parent">
<div class="child">
1
</div>
<div class="child">
2
</div>
<div class="child">
3
</div>
<div class="child child--large">
4
</div>
</div>

Answer 2

Use CSS flex-box. It's much more flexible and responsive than grid.
#main {
background-color: yellow;
}
#container {
display: flex;
flex-direction: column;
height: 100vh;
}
#child_1 {
background-color: red;
flex-grow: 1;
}
#child_2 {
background-color: green;
flex-grow: 1;
}
#child_3 {
background-color: lightBlue;
flex-grow: 2;
}
<div id="main">
<div id="container">
<div id="child_1">CHILD 1</div>
<div id="child_2">CHILD 2</div>
<div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
<div id="something-else">
More<br>elements<br>down<br>here...
</div>
</div>

Answer 3

Edited: It seems the original answer I deliver below is not what you want. The another idea I come up with when try on my own local machine (instead of Stackoverflow's the snippet editor) is to wrap the #child_3 inside another div called #child_3_wrapper and then position #child_3 relative to #child_3_wrapper instead of #container.
Here is the full code:
#main {
background-color: yellow;
}
#container {
display: grid;
height: 100vh; /*added this, try 100%, 98vh(or *padding:0;margin:0,...etc) to get the result desired*/
grid-template-rows: auto auto 1fr; /*added 1fr*/
}
#child_1 {
background-color: red;
grid-row: 1 / 2;
height: 100px;
}
#child_2 {
background-color: green;
grid-row: 2 / 3;
height: 77px;
}
/* changed the code below */
#child_3_wrapper {
position: relative;
}
#child_3 {
position: absolute;
top: 0; /* change top to 0 - relative to the wrapper, not the grid any more*/
width: 100%;
height: 100%;
background: lightblue;
}
<div id="main">
<div id="container">
<div id="child_1">CHILD 1</div>
<div id="child_2">CHILD 2</div>
<div id="child_3_wrapper">
<div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
</div>
<div id="something-else">
Something that is <br />
behind <br />
the absoolute <br />
div <br />
</div>
</div>
The old answer
Is this what you want? I tried tweaking around with it to get the result.
Added height: 100%; to #container and #child_3
#main {
background-color: yellow;
}
#container {
display: grid;
height: 100%; /* add this */
position: relative;
grid-template-rows: auto auto;
}
#child_1 {
background-color: red;
grid-row: 1 / 2;
height: 100px; // this can vary
}
#child_2 {
background-color: green;
grid-row: 2 / 3;
height: 77px; // this can vary
}
#child_3 {
width: 100%;
position: absolute;
top: 100%;
height: 100%; /* add this */
background: lightblue;
}
<div id="main">
<div id="container">
<div id="child_1">CHILD 1</div>
<div id="child_2">CHILD 2</div>
<div id="child_3">CHILD 3<br /> CHILD 3</div>
</div>
<div id="something-else">
Something that is <br />
behind <br />
the absoolute <br />
div <br />
</div>
</div>