Child DIV fill remaining height with scrollable content
Using flexbox can solve your problem.
A simple example:
.C {
display: flex; /* this enables flex layout */
flex-direction: column; /* child divs are placed in column */
height: 300px; /* Parent container must have a fixed height */
}
.A {
flex: 0 0 auto; /* div A should remain its original height (neither expand nor shrink) */
}
.B {
flex: 1 1 auto; /* div B should fit the remaining space */
overflow-y: auto; /* enable scroll bar when div D exceeds div B's height */
}
For a live example, see this fiddle