CSS: วิธีรับแถบเลื่อนสำหรับ div ภายในคอนเทนเนอร์ที่มีความสูงคงที่

ฉันมีมาร์กอัปต่อไปนี้:

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

CSS มีลักษณะดังนี้:

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

เนื่องจากเนื้อหาของความสูงของโดยทั่วไปจะมีมากกว่าพื้นที่ที่จัดไว้ให้โดยdiv.Content div.FixedHeightContainerในขณะนี้div.Contentขยายออกไปจากด้านล่างอย่างสนุกสนานdiv.FixedHeightContainer- ไม่ใช่สิ่งที่ฉันต้องการ

ฉันจะระบุdiv.Contentได้อย่างไรว่าได้รับแถบเลื่อน (ควรเป็นแนวตั้งเท่านั้น แต่ฉันไม่จุกจิก) เมื่อความสูงเกินกว่าที่จะใส่ได้

overflow:autoและไม่overflow:scrollได้ทำอะไรเลยด้วยเหตุผลที่แปลกประหลาด

การตั้งค่าoverflowควรดูแล แต่คุณต้องตั้งค่าความสูงContentด้วย หากไม่ได้ตั้งค่าแอตทริบิวต์ความสูง div จะเติบโตในแนวตั้งสูงเท่าที่จำเป็นและไม่จำเป็นต้องใช้แถบเลื่อน

ดูตัวอย่าง: http://jsfiddle.net/ftkbL/1/

FWIW นี่คือแนวทางของฉัน = วิธีง่ายๆที่เหมาะกับฉัน:

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

รหัสจากคำตอบข้างต้นโดย Dutchie432

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

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

ใช้overflowทรัพย์สิน

overflow: hidden; 

overflow: auto;

overflow: scroll;