Set max-height on inner div so scroll bars appear but not on parent div

Question

I have my HTML  CSS set up as per the code below  I have also added a JSFiddle link since it will be far more convenient to see the code in action   The problem I m having is that when there is a lot of text in the  inner-right div within the  right-col div  I want a scrollbar to appear for  inner-right only  My current code shows two scrollbars   inner-div and  right-col  If I change the CSS on  right-col to overflow  hidden so as to get rid of the outer scroll-bar  the inner scroll bar disappears as well  and  inner-right no longer respects the max-height rule   How can I set it up such that the scroll bar only shows up on  inner-right when it s contents grow too large   JSFiddle   x000D   x000D  html  body   x000D      height  100       x000D    x000D   wrapper   x000D      height  100   x000D      display  table  x000D      width  700px  x000D    x000D   header   footer   x000D      display  table-row  x000D      height  30px  x000D    x000D   body   x000D      height  100   x000D      display  table-row  x000D      background  rgba 255  0  0  0 5   x000D    x000D   left-col   right-col   x000D      display  inline-block  x000D      width  320px  x000D      height  100   x000D      max-height  100   x000D      margin-right  20px  x000D      border  2px black solid  x000D      vertical-align  top  x000D      padding  3px  x000D      overflow  auto      x000D    x000D   inner-right   x000D      height  100   x000D      max-height  100   x000D      overflow  auto  x000D      background  ivory  x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  header  gt Header lt  div gt  x000D       lt div id  body  gt  x000D           lt div id  left-col  gt  x000D              Lorem ipsum     little text x000D           lt  div gt  x000D           lt div id  right-col  gt  x000D               lt div id  header-text  gt Header lt  div gt  x000D               lt div id  inner-right  gt  x000D              Lorem ipsum    lots of text x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div id  footer  gt Footer lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This would work just fine  set the height to desired pixel   inner-right              height  100px              overflow auto

User · Answer

If you make  overflow  hidden in the outer div and overflow-y  scroll in the inner div it will work   http   jsfiddle net C8MuZ 11

User · Answer

It might be easier to use JavaScript or jquery for this  Assuming that the height of the header and the footer is 200 then the code will be   function SetHeight        var h     window  height            inner-right   height h-200            document  ready SetHeight     window  resize SetHeight

User · Answer

set this     inner-right       height  100       max-height  96    change here     overflow  auto      background  ivory      this will solve your problem

[html] Set max-height on inner div so scroll bars appear, but not on parent div

Examples related to html

Examples related to css