可滚动弹性箱列表？

Question

如何使ul可滚动？现在看来ul ulbox只是在浏览器窗口之外增长。

HTML

<div class="container">
  <div class="header">
    Untitled
  </div>
  <ul/>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>

CSS

body, html {
  overflow: hidden;  
}

.container {
  display: flex;
  flex-direction: column;
}

ul {
  flex: 1;
  overflow-y: auto;
}

CodePen

Answer 1

<强> Demo

CSS

html, body {
    height: 100%;
    overflow: hidden;    
}
.container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;    
    width: 50%;
    background-color: red;
}
.header {
    background-color: gray;
}
ul {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}