I want to use a full-height app using flexbox. I found what I want using old flexbox layout module (display: box; and other things) in this link: CSS3 Flexbox full-height app and overflow
This is a correct solution for browsers that only support the old version of the flexbox CSS properties.
If I want to try using the newer flexbox properties, I'll try to use the second solution in the same link listed as a hack: using a container with height: 0px;. It makes to show a vertical scroll.
I don't like it a lot because it introduces other problems and it is more a workaround than a solution.
html, body { height: 100%; }#container {display: flex;flex-direction: column;height: 100%;}#container article {flex: 1 1 auto;overflow-y: scroll;}#container header { background-color: gray;}#container footer { background-color: gray;}<section id="container"><header id="header">This is a header</header><article id="content"> This is the content that<br /> With a lot of lines.<br /> With a lot of lines.<br /> This is the content that<br /> With a lot of lines.<br /><br /> This is the content that<br /> With a lot of lines.<br /><br /> This is the content that<br /> With a lot of lines.<br /></article><footer id="footer">This is a footer</footer></section>I have prepared a JSFiddle as well with a base example: http://jsfiddle.net/ch7n6/
It is a full-height HTML website and the footer is at the bottom because of the flexbox properties of the content element. I suggest you move the bar between CSS code and result to simulate different height.