我试图让这个问题尽可能通用。本质上,我在另一个垂直 flex 布局中有一个垂直(列) flex 布局。在外部布局中,我希望主要区域(在我的示例中为 outer-main
)填充剩余的垂直空间。在内部布局中,我还希望主要区域 (inner-main
) 填充剩余的垂直空间。
这在外部布局上工作正常,但在内部布局中,我希望只有主要区域 (inner-main
) 可以滚动,而不是整个布局。因此 inner-header
应该始终可见,只有 inner-main
填充剩余空间并可滚动。
如何调整我的 CSS 来实现这一点?
全屏运行时更容易看到代码段
.outer {
border: 1px solid red;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 60vh;
padding: 5px;
}
.outer > div {
border: 1px solid purple;
flex: 0 0 auto;
}
.outer .outer-header {
height: 10vh;
}
.outer .outer-main {
display: flex;
flex-direction: column;
flex: 0 1 auto;
overflow: auto;
padding: 5px;
}
.outer .outer-main > div + div,
.outer > div + div {
margin-top: 5px;
}
.outer .outer-main > div {
border: 1px solid green;
flex: 0 0 auto;
}
.outer .outer-main .inner-main {
flex: 0 1 auto;
}
<div class="outer">
<div class="outer-header">Outer Header</div>
<div class="outer-main">
Outer Main
<div class="inner-header">Inner Header</div>
<div class="inner-main">
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
</div>
</div>
</div>
最佳答案
好吧,我只需要将 overflow: auto
添加到 inner-main
div,这样它就可以滚动了。请参阅下面更新的代码段。
.outer {
border: 1px solid red;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 60vh;
padding: 5px;
}
.outer > div {
border: 1px solid purple;
flex: 0 0 auto;
}
.outer .outer-header {
height: 10vh;
}
.outer .outer-main {
display: flex;
flex-direction: column;
flex: 0 1 auto;
overflow: auto;
padding: 5px;
}
.outer .outer-main > div + div,
.outer > div + div {
margin-top: 5px;
}
.outer .outer-main > div {
border: 1px solid green;
flex: 0 0 auto;
}
.outer .outer-main .inner-main {
flex: 0 1 auto;
overflow: auto;
}
<div class="outer">
<div class="outer-header">Outer Header</div>
<div class="outer-main">
Outer Main
<div class="inner-header">Inner Header</div>
<div class="inner-main">
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
<div>Inner Main Content</div>
</div>
</div>
</div>
关于html - 可滚动 flex 内容内的可滚动 flex 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52102799/