flex-box布局上下分栏

.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