I need help with getting a nested container (.widget2) to scroll while still keeping the borders intact.
Currently, the inner container is scrolling past the bottom edge of the parent container, and the scrollbar isn't displaying correctly.
If you want to see the issue in action, check out this fiddle: 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;
}
#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>
</div>
</div>
</div>