How to make a scrollable element fill 100% of the remaining height of a parent element?

Question

I have a container div that is a fixed height. It has some content and another child element. I would like the child element to scroll when it has filled the remaining heigh

Answer 1

Here is an experimental CSS possibility note - i made the height and width of the container wider to see it more clearly.

 #container {
      height: 200px;
      width: 200px;
      border: solid;
    overflow: auto;
  }
  #titlebar {
      background: gray;
  }
  #body {
      height:calc(100% - 4em); /* definitely non standard - the 4 em is an approximate size of the titlebar*/
      overflow: auto;
      background: lightblue;
  }

/*Old answer - disregard */

/*#container {
    height: 100px;
    width: 100px;
    border: solid;
    overflow:auto;   /* overflow belongs here *//*
}
#titlebar {
    background: gray;
}
#app-body {

    background: lightblue;
}*/