flex布局 如何让内容不超出页面的高度

Question

用了flex布局，这样的布局，如何让这3个div，分别沾满整个页面，就仅用该页面的高度，而不出现右侧滚动条的那种，中间的div是table表格，求问该怎么写，

Answer 1

容器用

.main {

    width: 100vw;

    height: 100vh;

    display: flex;

    flex-flow: column nowrap;

    justify-content: space-between;

}

然后header和footer用flex定高，中间内容的部分直接flex:auto;是不是就行了？

记得overflow: hidden;和另外跑遍兼容。