I am facing an issue with two div elements within a parent container. One div has a fixed height, and the other should fill up the remaining space in the parent container. The height of the parent container is dynamic and can vary between 100px, 200px, or 300px. However, the section displayed in green spills over the boundary of the blue parent section. I have added some margin to illustrate this overflow. My goal is to have the green section only fill up until the bounds of the parent without displaying any scroll bars. I am unsure how to eliminate the extra 15px that extend beyond the parent's boundaries. Any assistance would be greatly appreciated.
.container {
width: 100%;
height: 100px;
background: blue;
position: relative;
}
.child1 {
position: absolute;
top: 0;
height: 15px;
width: 100%;
background: red;
}
.child2 {
position: absolute;
top: 15px;
height: 100%;
width: 100%;
margin-left: 5px;
background: green;
}<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>