当中间内容多到屏幕底部的适合，黄色区域移出屏幕外，继续往下扩大中间内容区域
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ margin: 0; padding: 0; height: 500px; } .fater{ min-height: 100%; display: flex; flex-direction: column; } .view1{ background: #bfa; } .view2{ background: #333; flex: 1; } .view3{ background: yellow; } </style> </head> <body> <div class="fater"> <div class="view1"> aa </div> <div class="view2"> aassasdasfasfasfaassasdasfasfasfaassasdasfasfasf a </div> <div class="view3"> sss </div> </div> </body> </html>给父亲设置一个display：flex;属性，中间的div设置flex：1; 进而实现中间空间不足以容纳那么多内容时，会自动向下填充，并且下面的view3也会自动下移
参考：https://www.douban.com/note/717223803/?type=like#sep
