CODEWITHSUNDEEP
htmlcssflexbox
gerald
gerald

Reputation: 223

Adding scroll to nested container

I'm trying to get a container (.widget2) within a container (.content) to scroll and still maintain the borders.

For some reason, the inner container is scrolling past the bottom edge of the parent container, and the scrollbar doesn't render.

Here's a fiddle to show what I'm talking about: 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>

Upvotes: 1

Views: 130

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372019

To make .widget2 scrollable, simply make the parent a flex container.

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

revised fiddle

Upvotes: 1

Related Questions