垂直滚动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;然而相反，它覆盖了它的父项并且没有滚动。

我在做什么错误/缺失？

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 
}