Why does my flexbox expand despite overflow:hidden/auto?

Question

Can anyone explain this behavior? I've created two stacked flexbox children to be a simple outline for a full-screen web app. However, adding content inside of my top element seems to expand it, eventually pushing the bottom one off of the screen.

var buttonEl = document.getElementById('addButton');

buttonEl.addEventListener('click', function() {
    var newEl,
        ulEl;
    
    // Create a list item element
    newEl = document.createElement('li');
    newEl.innerHTML = "Test List Item";
    
    // Add the list item element to the list
    ulEl = document.getElementById('list');
    ulEl.appendChild(newEl);
}, false);

* {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
html {
    width: 100%;
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: lightblue;
}
#top {
    flex-grow: 1;
    overflow-y: auto;
}
#bottom {
    flex-basis: 1em;
}
li {
    width: 100%;
    height: 2em;
    line-height: 2em;
    background: white;
}

<div id="top">
    <button id="addButton">add list item</button>
    <ul id="list">
    </ul>
</div>
<div id="bottom">
    Bottom
</div>

Answer 1

Here's one way to do it: http://jsfiddle.net/1ejgybmv/.

* {
    padding: 0px;
    margin: 0px;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background: lightblue;
}
#top {
    flex: 1 1 auto;
    overflow-y: auto;
}

#bottom {
    flex: 0 0 1em;
}

li {
    height: 2em;
    line-height: 2em;
    background: white;
}