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.net/1o79a6nc/2/

#cont {    padding: 5px;    background-color: red;    max-height: 150px;    max-width: 50%;  }  #body {    background-color: blue;    overflow-y: auto;    overflow-x: hidden;  }  #head {    background-color: green;  }

<div id='cont'>    <div id='head'>      <div>Head</div>    </div>    <div id='body'>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>    </div>  </div>

I want the body to only expand so that it fits inside the parent (including the padding), and then apply scroll bars when necessary.

As the example shows, I have tried overflow-y: auto, however this is not working as I have intended.

Edit: I want scroll bars to only appear on the body, so that the head section and the parent bottom padding are always visible.

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;  }

<div id='cont'>    <div id='head'>      <div>Head</div>    </div>    <div id='body'>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>      <div>Body</div>    </div>  </div>

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;  }

<div id='cont'>    <div id='head'>      <div>Head</div>    </div>    <div id='body'>      <div>        <div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>          <div>Body</div>        </div>      </div>    </div>  </div>

Answer 2

This solution worked for me and its display the vertical scrollbar only in child div.

.parent {     height : 300px ; //for example     overflow: hidden; }    .child   {        max-height: 100%;     overflow-y: scroll; }