overflow滚动遇到flex失效问题解决

最近做项目的时候碰到了一个情况。需要固定头部，内容部分占据剩余空间的上下布局结构。但是出现了overflow属性遇到了flex布局失效的情况。

<style>
  .content {
    width: 300px;
    height: 400px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
  }

  .mbody {
    background: #009688;
    height: 500px;
    width: 100%;
  }
</style>

可以清楚的看到，mbody的高度是大于content的高度的，但是滚动会失效，如图所示。
解决办法

加上 flex: 1 0 auto; （纵向滚动）
或 flex: 1 0 auto; （横向滚动）

<style>
  .content {
    width: 300px;
    height: 400px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
  }

  .mbody {
    background: #009688;
    height: 500px;
    width: 100%;
    flex: 1 0 auto;  /* 解决 */
  }
</style>

问题解决

PS：如果mbody是父容器，那么需要加上height:0或者width:0的属性