垂直滚动的DIV，而无需重叠父母

Question

我正在尝试创建一个可滚动的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 
}

在此示例中（这也是启动），我希望将蓝色保留在其父母内部，并成为可滚动的div；但是，它使其与父母重叠，无法滚动。

我在做什么错/缺少？

Answer 1

将 overflow: auto添加到父

#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

只是将溢出属性放在父母上。

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