How to make div occupy remaining height?

Question

I have this problem, I have two divs:

<         


        
      

Answer 1

Why not use padding with negative margins? Something like this:

And then

.parent {
  padding-top: 1em;
}
.child1 {
  margin-top: -1em;
  height: 1em;
}
.child2 {
  margin-top: 0;
  height: 100%;
}