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

You could simply set the container to flexbox.

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}

jsFiddle

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1; /* added */
}
#head {
  background-color: green;
}

  

    
Head
  
  

    
Body
    
Body
    
Body
    
Body
    
Body
    
Body
    
Body
    
Body
    
Body
    
Body
    
Body
    
Body
  

Another option would be using CSS table, some extra HTML code is needed. And max-height doesn't work with table layout, so use height instead.

jsFiddle

#cont {
  padding: 5px;
  background-color: red;
  height: 150px;
  width: 50%;
  display: table;
}
#head,
#body {
  display: table-row;
}
#head > div,
#body > div {
  display: table-cell;
  position: relative;
}
#body > div {
  height: 100%;
}
#body > div > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
}
#head {
  background-color: green;
}

  

    
Head
  
  

    

      

        
Body
        
Body
        
Body
        
Body
        
Body
        
Body
        
Body
        
Body
        
Body
        
Body
        
Body
        
Body