flex布局高度自适应，滚动条出现的问题

内容高度自适应，如果超出就显示滚动条，滚动加载，但是我们平时设置flex布局时，通过flex：1给子组件设置内容高度自适应时，内容超出了但是滚动条出现了一些问题，加载高度不够，找了一下网上的解决办法，可以通过overflow：auto或者height： 0解决。
栗子：

<div class="home">
    <div class="header">这是固定的高度</div>
    <div class="main">这的内容高度要自适应不能固定高度，还有如果我的内容太多了超出了，就得自动显示滚动条，通过滚动加载我的内容</div>
</div>

当父组件设置了flex布局时：

.home {
    display: flex;
    flex-direction: column;
}

子组件header设置了固定高度：

.header {
    width: 100%;
    height: 74px;
    background: #eee;
}

子组件main设置了flex：1，内容高度自适应，超出则出现滚动条，滚动加载内容：

.main {
    flex: 1;
    overflow: auto;
    width: 0; // 横向滚动条
    height: 0; // 纵向滚动条
}