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

css scrollbar overflow

David · Jan 10, 2011 · Viewed 288.5k times · Source

I have the following markup:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

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.

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/

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

Answer

Related questions