Why is my flexbox expanding despite overflow: hidden / auto?

Question

Can anyone explain this behavior? I created two horizontally stacked flexboxes, which I would like to be a simple diagram for a full-screen web application. However, adding content inside my top flexbox seems to expand it, eventually tapping the bottom 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 is one way to do this: 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; } 

Answer 2

very easy. You define all elements with overflow:hidden at the top

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

Then you overwrite the property for the #top div as follows:

 #top { flex-grow: 1; overflow-y: auto; } 

Effectively kill is a property that you defined first. Just get rid of this overflow-y or define overflow-y:hidden and it will work. Remember that the order of definitions in CSS is very important, so anything you add AFTER one definition will be overwritten with the new definition.