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 {_x000D_
height: 100%; _x000D_
}_x000D_
#container {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
height: 100%;_x000D_
}_x000D_
#container article {_x000D_
flex: 1 1 auto;_x000D_
overflow-y: scroll;_x000D_
}_x000D_
#container header {_x000D_
background-color: gray;_x000D_
}_x000D_
#container footer {_x000D_
background-color: gray;_x000D_
}<section id="container" >_x000D_
<header id="header" >This is a header</header>_x000D_
<article id="content" >_x000D_
This is the content that_x000D_
<br />_x000D_
With a lot of lines._x000D_
<br />_x000D_
With a lot of lines._x000D_
<br />_x000D_
This is the content that_x000D_
<br />_x000D_
With a lot of lines._x000D_
<br />_x000D_
<br />_x000D_
This is the content that_x000D_
<br />_x000D_
With a lot of lines._x000D_
<br />_x000D_
<br />_x000D_
This is the content that_x000D_
<br />_x000D_
With a lot of lines._x000D_
<br />_x000D_
</article>_x000D_
<footer id="footer" >This is a footer</footer>_x000D_
</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.
Thanks to https://stackoverflow.com/users/1652962/cimmanon that gave me the answer.
The solution is setting a height to the vertical scrollable element. For example:
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}
The element will have height because flexbox recalculates it unless you want a min-height so you can use height: 100px; that it is exactly the same as: min-height: 100px;
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 100px; /* == min-height: 100px*/
}
So the best solution if you want a min-height in the vertical scroll:
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 100px;
}
If you just want full vertical scroll in case there is no enough space to see the article:
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
The final code: http://jsfiddle.net/ch7n6/867/