可滚动对话框中断背景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填充整个屏幕（垂直），页脚底部可见。

当section大于（高于）窗口的高度

时，此布局也有效

DEMO

现在你可以滚动，页脚仍在底部。

但是，如果我们有一个比屏幕更大的模态对话框，那么这一切似乎都不再适用了

SCROLL DEMO

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

Answer 1

给dialog{ max-height: 100%}

以下是FIDDLE