CSS: comment obtenir des barres de défilement pour div à l'intérieur d'un conteneur de hauteur fixe

J'ai le balisage suivant:

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

Le CSS ressemble à ceci:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

En raison de son contenu, la hauteur de div.Contentest généralement supérieure à l'espace fourni par div.FixedHeightContainer. Pour le moment, div.Contents'étend joyeusement du fond de div.FixedHeightContainer- pas du tout ce que je veux.

Comment spécifier que les div.Contentbarres de défilement sont obtenues (de préférence verticales uniquement, mais je ne suis pas difficile) lorsque sa hauteur est trop grande pour s'adapter?

overflow:autoet overflow:scrollne font rien, pour une raison étrange.

le réglage du overflowdevrait en prendre soin, mais vous devez également régler la hauteur de Content. Si l'attribut height n'est pas défini, le div augmentera verticalement aussi haut que nécessaire et les barres de défilement ne seront pas nécessaires.

Voir l'exemple: http://jsfiddle.net/ftkbL/1/

FWIW, voici mon approche = une approche simple qui fonctionne pour moi:

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

Code de la réponse ci-dessus par Dutchie432

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

utiliser la overflowpropriété

overflow: hidden; 

overflow: auto;

overflow: scroll;