如何正确地使flex-box子项滚动
如何正确地使flex-box子项滚动
提问于 2018-08-13 23:04:36
当我面对一些嵌套的flex-boxes时，我被卡住了，无法使内容正确滚动。这是我的css：
html,body,#root{
width:100%;
height:100%;
padding:0;
margin:0;
}
.flex-fill{
height:100%;
width:100%;
display:flex;
align-items:stretch;
}
.flex-fill>div:last-child{
flex-grow:1;
}
.flex-col{
flex-direction:column;
}<div id='root'>
<div class='flex-fill flex-col'><!--actually scrolling div-->
<div style="flex:0 0 35px"><h1>main title</h1></div>
<div>
<div class='flex-fill flex-col'>
<div style="flex:0 0 30px"><h2>subtitle</h2></div>
<div class='flex-fill'>
<div style="flex:0 0 30%">...left side nav list...</div>
<div class='flex-fill flex-col'>
<div style="flex:0 0 25px">...data header...</div>
<!--I hope the content of this div is scroll-able-->
<div style="overflow-y:scroll">...data list...</div>
</div>
</div>
</div>
</div>
</div>
</div>
最里面的div中包含的数据列表非常长，我想让它可以滚动。但事实上，上面的代码使根div的整个内容滚动。我对flex或overflow有误解吗？如何修复其他部件并只滚动数据列表？
回答 2
Stack Overflow用户
发布于 2018-08-14 18:21:18
答案已更新，以保持HTML结构不变。删除内联样式并将其作为类添加：
html,body{
height:100%;
padding:0;
margin:0;
}
#root {
height: 100%;
display: flex;
}
.flex-fill{
height:100%;
display:flex;
align-items:stretch;
}
.flex-col{
flex-direction:column;
display: flex;
flex: 1 0 0;
height: 100%;
}
.flex-row{
flex-direction:row;
display: flex;
height: 100%;
}
.scrolling-div {
height: 100%;
overflow-y: scroll;
}<div id='root'>
<div class='flex-fill flex-col'>
<div><h1>main title</h1></div>
<div class="flex-col">
<div class='flex-col'>
<div><h2>subtitle</h2></div>
<div class="flex-row">
<div>...left side nav list...</div>
<div class='flex-col'>
<div>...data header...</div>
<!--Now Scrolls-->
<div class="scrolling-div">
...scrolling data list...<br />
...scrolling data list...<br />
...scrolling data list...<br />
...scrolling data list...<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-08-13 23:58:41
@Welson钟，请看下面的工作片段，请在Full page视图中查看，希望它现在有帮助:)
注意:过多的flex会杀死flex ;)这就是你代码的问题所在。
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
font-family: sans-serif;
font-size: 18px;
}
.main {
display: flex;
flex-direction: row;
flex: 1 0 auto;
}
.sidebar {
flex: 1 auto;
}
.content {
display: flex;
flex-flow: column nowrap;
flex: 3 0px;
}
h1,h2,.data-header {
flex: none;
}
/* below css is for visual purpose only */
.main *:not(.content) {
box-shadow: inset 0 0 0 1px #ccc;
padding: 10px;
}<h1>main title</h1>
<h2>sub title</h2>
<div class="main">
<div class="sidebar">
...left side nav list...
</div>
<div class="content">
<div class="data-header">...data header...</div>
<div style="overflow-y:scroll; flex: auto">...data list...</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51825331
复制相关文章
相似问题