Vertically scrollable div without overlapping parent

Question

I am trying to create a scrollable div. I learnt that I can make it with overflow-y: scroll, however, when I tried it, in my case it's overlapping its parent and it doesn't get scrollable.

Html:

<div id="parent">
  <div id="child"></div>
</div>

Css:

#parent {
 height: 100px;
 width:300px;
 background-color:red;  
}

#child {
 background-color: blue; 
 height: 150px; 
 width: 250px 
}

In this example (that is also on bootply), I expected to keep the blue inside its parent and becomes a scrollable div; however instead it overlaped its parent and didn't get scrollable.

What am I doing wrong/missing?

Answer 1

add overflow: auto to parent

#parent {
 height: 100px;
 width:300px;
 background-color:red;  
 overflow: auto;
}

#child {
 background-color: blue; 
  /*height: 150px;*/
  width: 250px; 
  color: #fff;
  display: inline-block;
}

<div id="parent">
  <div id="child">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
</div>

Answer 2

Just put overflow property with a value of scroll or auto on parent.

#parent {
 height: 100px;
 width:300px;
 background-color:red;  
 overflow: auto;
}

#child {
 background-color: blue; 
 height: 150px; 
 width: 250px 
}