如何解决flex:1撑开父元素问题

开发过程中很多时候需要一个区域自动撑开，并且在刚好撑开的区域内实现滚动，这时用flex:1去做。但实际效果很多时候会出现区域撑的过大，却没有滚动效果。
要实现4自动撑满剩余空间，并且里面的内容超出时滚动。
容器1设置 display:flex;flex-direction:column;height:100%;
容器2设置 display:flex;flex-direction:column;flex:1;height:0;height:0只是阻止容器2被撑大，不设置容器2的高度会溢出。
容器3设置 flex:1;overfow:auto;继续阻止容器被撑开，并实现4的溢出滚动。