CSS how to get scrollbars for div inside container of fixed height

Question

I have the following markup    lt div class  FixedHeightContainer  gt     lt h2 gt Title lt  h2 gt     lt div class  Content  gt        blah blah blah       lt  div gt   lt  div gt    The CSS looks like this    FixedHeightContainer     float right    height  250px    width 250px       Content             Due to its content  the height of div Content is typically greater than the space provided by div FixedHeightContainer  At the moment  div Content merrily extends out of the bottom of div FixedHeightContainer - not at all what I want   How do I specify that div Content gets scrollbars  preferably vertical only  but I m not fussy  when its height is too great to fit   overflow auto and overflow scroll are doing nothing  for some bizarre reason

User · Accepted Answer

setting the overflow should take care of it  but you need to set the height of Content also  If the height attribute is not set  the div will grow vertically as tall as it needs to  and scrollbars wont be needed   See Example  http   jsfiddle net ftkbL 1

User · Answer

FWIW  here is my approach   a simple one that works for me    lt div id  outerDivWrapper  gt      lt div id  outerDiv  gt         lt div id  scrollableContent  gt  blah blah blah        lt  div gt      lt  div gt   lt  div gt   html  body      height  100      margin  0em      outerDivWrapper   outerDiv      height  100      margin  0em      scrollableContent      height  100      margin  0em     overflow-y  auto

User · Answer

Code from the above answer by Dutchie432    FixedHeightContainer       float right      height  250px      width 250px       padding 3px       background  f00      Content       height 224px      overflow auto      background  fff

[css] CSS: how to get scrollbars for div inside container of fixed height

Examples related to css

Examples related to scrollbar

Examples related to overflow