前提：盒子必须是层层嵌套的
思路：
- 将最顶层元素display设为flex，并将flex-direction设为column将主轴方向改变
- 将每一层级需要固定的盒子设置固定的高度,不设置flex-grow
- 利用flex:grow: 1，使得嵌套盒子中可扩展的盒子分配父元素的剩余内容
- 在内容可滚动的盒子中设置：height:0和 overflow-y:auto并利用flex-grow将父元素剩余的空间分配给它
技术说明
- display：flex将盒子设为弹性布局
- overflow-y规定了当一个元素的内容太大无法适应BFC的时候，内容该如何显示(它是overflow-x 和overflow-y的简写属性)
- overflow: visible=>默认值。内容不会被修剪，可以呈现在元素框之外。
- overflow: hidden=>如果需要，内容将被剪裁以适合填充框。 不提供滚动条。
- overflow: sctoll=>如果需要，内容将被剪裁以适合填充框。 浏览器显示滚动条，无论是否实际剪切了任何内容。 （这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。
- overflow: auto=>取决于用户代理。 如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。
