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

Tags:

Html

Css