.testbox{ position: relative; height:300px; border: 4px solid green; width: 400px; } .flex-rows { display: flex; flex-direction: column; position: absolute; top:0; left:0; right:0; bottom:0; } .flex-rows nav{ background-color: #ccc; } .flex-rows article { background-color: #cdc; height:100%; position: relative; } .flex-rows article > .scrollview { position: absolute; top:0; right:0; bottom:0; left:0; overflow: auto; }
<div class="testbox"> <div class="flex-rows"> <nav> Nav.... height:auto </nav> <article> <div class="scrollview"> <ol> <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li> <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li> <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li> <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li> </ol> </div> </article> </div> </div>
See the Pen flex-box布局上下分栏 by Fan Yanan (@fanyanan) on CodePen.light