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;和另外跑遍兼容。

Answer 2

看起来是元素块的padding或margin撑开了
给所有的div 加个box-sizing: border-box;

Answer 3

这是我写的你可以看一下是不是你想要的效果 https://codepen.io/kimfoc/pen...

Answer 4

给body或是main设置一个overflow: hidden;头部和底部的高度定值，中间的撑开就可以了