我试图让容器 (.widget2
) 在容器 (.content
) 中滚动并仍然保持边界。
由于某种原因,内部容器滚动超过父容器的底部边缘,并且滚动条不呈现。
这是一个 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;
/* 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>
最佳答案
要使 .widget2
可滚动,只需将父容器设为 flex 容器即可。
#content {
padding:10px;
border:2px solid blue;
overflow:hidden;
display: flex; /* NEW */
flex-direction: column; /* NEW */
}
关于html - 将滚动条添加到嵌套容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41193616/