使CSS网格自动调整其高度直至溢出

Question

我正在尝试使用DIV作为带有页眉，主要和页脚的网格来创建“对话框”。对话框的初始高度为400px，其最大高度设置为600px。如果主体部分的内容没有扩展主体的高度，则没有问题。如果内容多于主窗口中的内容，则对话框应将其高度扩展到最大高度，如果添加了更多内容，则主部分应显示滚动条。

    .dialog {
      height:400px;
      max-height:600px;
    }
    .dialog > main {
      overflow:auto;
    }

CSS网格版本：https://codepen.io/kimhrac/pen/abzvggm

CSS flex版本：https://codepen.io/kimhrac/pen/BayjQPQ