html - 可滚动对话框打破背景 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;
}
...

DEMO

部分 填满整个屏幕(垂直)并且页脚在底部可见。

当 section 大于(高于)窗口的高度时，此布局也适用

DEMO

现在您可以滚动了，页脚仍然在底部。

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

SCROLL DEMO

如果滚动到底部，您可以看到页脚不再位于底部。这可以修复吗？还是对此有很好的解决方案？

Answer 1

给 dialog{ max-height: 100%}

这是 FIDDLE