Prevent child div from overflowing parent div

Question

I have a parent div containing a header section and a body section. The parent div has a maximum height, but no minimum height.

See this example: https://jsfiddle.ne

Answer 1

i updated your jsfiddle check it out

jsfiddle

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  overflow-y: scroll;
}
#body {
  background-color: blue;

}
#head {
  background-color: green;
}