css樣式：

html,body{height:100%;margin: 0;padding: 0;}

.flex-container{height: 100%;display: flex;flex-direction: column;text-align: center;}

.flex-item:nth-child(1),.flex-item:nth-child(3){flex-grow: 0;flex-shrink: 0;background-color: #ababab;}

.flex-item:nth-child(2){flex-grow: 1;flex-shrink: 1;background-color: #000;overflow-y: auto;}

.center{position: fixed;top: 50%;left: 50%;margin-top: -10px;margin-left: -24px;}

html結(jié)構(gòu)：

完整頁面代碼：

瀏覽器效果：

改變中間內(nèi)容的高度后html：

瀏覽器效果：(滾動(dòng)條自動(dòng)消失)

改變可視區(qū)域大小后效果：