入れ子になったコンテナにスクロールを追加する

Question

コンテナ内のコンテナ（.widget2）をスクロールして維持するためにコンテナ（.content）を取得しようとしています。

何らかの理由で、内部コンテナが親コンテナの下端をスクロールしていて、スクロールバーがレンダリングされません。単に親フレックスコンテナ作り、.widget2をスクロール可能にし https://jsfiddle.net/ggongon/kcyxz34L/1/

*, 
 
*:before, 
 
*:after { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    border: 6px solid red; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    /* position:absolute; 
 
top:10px; left:10px; right:10px; bottom:10px; */ 
 
} 
 
#summary { 
 
    height: 60px; 
 
    border: 2px solid green; 
 
} 
 
#content { 
 
    padding: 10px; 
 
    border: 2px solid blue; 
 
    overflow: hidden; 
 
} 
 
.widget { 
 
    background: gray; 
 
    border-radius: 12px; 
 
    min-height: 30px; 
 
} 
 
.widget2 { 
 
    overflow: auto; 
 
} 
 
.padbottom { 
 
    margin-bottom: 20px; 
 
}

<div id="container"> 
 
    <div id="summary"> 
 
    header section 
 
    </div> 
 
    <div id="content"> 
 
    <div class="widget padbottom"> 
 
     widget area 
 
    </div> 
 
    <div class="widget widget2"> 
 
     another widget area <br /><br> 
 
     Problem:<br> 
 
     1. this widget area scrolls past the bottom red border<br > 
 
     2. How do i add a scroll in this section only and maintain the 10px padding within the content area <br><br><br> 
 
sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br> 
 
sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br>sdfasfd<br> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

：ここ

は私が話しているかを示すためのフィドルです。利用可能な領域の100％を埋めるために成長する必要が.widget2

#content { 
    padding:10px; 
    border:2px solid blue; 
    overflow:hidden; 
    display: flex;   /* NEW */ 
    flex-direction: column; /* NEW */ 
} 

revised fiddle