垂直滚动 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 
}

在此示例中（也在 bootply 上），我希望将蓝色保留在其父项中并成为可滚动的 div；然而，它与父级重叠并且无法滚动。

我在做什么wrong/missing？

Answer 1

只需将 overflow 属性的值设置为 scroll 或 auto 到 parent。

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

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

Answer 2

将 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>

垂直滚动 div 不与父级重叠

Vertically scrollable div without overlapping parent

html

css

scrollable