親をオーバーラップさせない垂直スクロール可能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でもある）、Iは、その親の内部に青色を維持すると予想し、スクロールDIVなります。代わりに、親にオーバーラップし、スクロール可能になりませんでした。

私は間違っている/紛失していますか？

Answer 1

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

親に overflow: autoを追加

Answer 2

親にscrollまたはautoの値を指定してオーバーフロープロパティを設定するだけです。

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

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