scrollable div inside container

Question

I have the following HTML  http   jsfiddle net fMs67   I d like to make the div2 to respect the size of div1 and scroll the contents of div3   Is this possible   Thanks   UPDATE-1   This is the more advanced case that I oversimplified when I asked the question  http   jsfiddle net Wcgvt   I need somehow that header it s sibling div to not overflow the parent div s size

User · Answer

I created an enhanced version  based on Trey Copland s fiddle  that I think is more like what you wanted   Added here for future reference to those who come here later  Fiddle example       lt body gt   lt style gt   modal     height  390px    border  5px solid green     heading     padding  10px     content     height  300px    overflow auto    border  5px solid red     scrollable     height  1200px    border  5px solid yellow      footer     height  2em    padding   5em     lt  style gt         lt div class  modal  gt             lt div class  heading  gt               lt h4 gt Heading lt  h4 gt             lt  div gt             lt div class  content  gt                 lt div class  scrollable   gt hello lt  div gt             lt  div gt             lt div class  footer  gt              Footer            lt  div gt         lt  div gt       lt  body gt

User · Answer

The simplest way is as this example    lt div gt      lt div style   height 300px   gt       SOME LOGO OR CONTENT HERE     lt  div gt      lt div style  overflow-x  hidden overflow-y  scroll   gt         THIS IS SOME TEXT     lt  DIV gt    You can see the test cases on  https   www w3schools com css css overflow asp

User · Answer

If you put overflow  scroll on a fixed height div  the div will scroll  if the contents take up too much space

User · Answer

x000D   x000D  function start     x000D   document getElementById  textBox1   scrollTop   5  x000D      scrolldelay   setTimeout function    start      40   x000D    x000D   x000D  function stop    x000D   clearTimeout scrolldelay   x000D    x000D   x000D  function reset    x000D   var loc   document getElementById  textBox1   scrollTop  x000D   document getElementById  textBox1   scrollTop -  loc  x000D   clearTimeout scrolldelay   x000D    x000D    adjust height of paragraph in css x000D    element textbox in div x000D    adjust speed at scrolltop and start  x000D   x000D   x000D

User · Answer

Is this what you are wanting    x000D   x000D   lt body gt  x000D     lt div id  div1  style  height  500px   gt  x000D       lt div id  div2  style  height  inherit  overflow  auto  border 1px solid red   gt  x000D         lt div id  div3  style  height 1500px border 5px solid yellow   gt hello lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    http   jsfiddle net fMs67 1

User · Answer

i have just added  overflow scroll   in  div3  with fixed height   see the fiddle - http   jsfiddle net fMs67 10

User · Answer

Adding position  relative to the parent  and a max-height 100   on div2 works    x000D   x000D   lt body gt  x000D     lt div id  div1  style  height  500px position relative   gt  x000D       lt div id  div2  style  max-height 100  overflow auto border 1px solid red   gt  x000D         lt div id  div3  style  height 1500px border 5px solid yellow   gt hello lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   lt  body gt   x000D   x000D   x000D      Update  The following shows the  updated  example and answer  http   jsfiddle net Wcgvt 181   The secret there is to use box-sizing  border-box  and some padding to make the second div height 100   but move it s content down 50px  Then wrap the content in a div with overflow  auto to contain the scrollbar  Pay attention to z-indexes to keep all the text selectable - hope this helps  several years later

User · Answer

Instead of overflow auto  try     overflow-y auto   Should work like a charm

[html] scrollable div inside container

Examples related to html

Examples related to css