垂直可滚动的div，不重叠父级(Vertically scrollable div without overlapping parent)

 我正在尝试创建一个可滚动的div。 我知道我可以使用overflow-y: scroll ，但是，当我尝试它时，在我的情况下它与父项重叠并且它不能滚动。 
 
 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 
}
 
 在这个例子中（也是在bootply上 ），我希望将蓝色保留在其父级中并成为可滚动的div; 但是它重叠了它的父节点并且没有可滚动。 
 
 我做错了什么/错过了什么？ 

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?

原文：https://stackoverflow.com/questions/41133769