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

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.

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

FWIW, here is my approach = a simple one that works for me:

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}