可滚动对话框打破背景 flex-grow

Question

我有一个像

这样的简单页面

<main>
    <header>Header</header>
    <section>Content</section>
    <footer>Footer</footer>
</main>
<dialog>Dialog</dialog>

CSS:

main {
   display: flex;
   flex-direction: column;
}
section {
    flex-grow: 1;
}
...

section 填满整个屏幕（垂直），底部可见页脚。

当 section 大于（高于）window

的高度时，此布局也适用

现在可以滚动了，页脚还在底部。

但是，如果我们有一个比屏幕还大的模态对话框，所有这一切似乎都不再有效了

如果滚动到底部，您会看到页脚不再位于底部。这可以修复吗？或者有什么好的解决方案吗？

Answer 1

给予dialog{ max-height: 100%}

scrollable dialog breaks background flex-grow