Q:

Two divs - one fixed height, the other to fill the remaining space

I have two div: one with static height and the other to fill the rest of the space of the parent. The parent div gets dynamic height. In the example I have set it to 100px, but it can be 200px or 300px. The green section spills over the blue parent section. I have added margin just to show the spill. I want it to fill only until the parent bounds and don't want any scroll bar. I am not sure how to get rid of this 15px going out of the parents bounds. Appreciate any help here.

.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>

A:

please use flexbox

.p {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  border: 1px solid red;
}

.c {
  height: 15px;
  background-color: yellow;
}

.d {
  flex-grow: 1;
  background-color: green;
}
<div class='p'>
    <div class=c></div>
    <div class=d>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error officia, perferendis sed ipsam quae illo voluptas voluptate, obcaecati pariatuLorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

A:

define child2's height and width as follows:
height: calc(100% - 15px);
width: calc(100% - 5px);

.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: calc(100% - 15px);
  width: calc(100% - 5px);
  margin-left: 5px;
  background: green;
}
<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

