[html] How can I combine flexbox and vertical scroll in a full-height app?

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.

Flexbox spec editor here.

This is an encouraged use of flexbox, but there are a few things you should tweak for best behavior.

• Don't use prefixes. Unprefixed flexbox is well-supported across most browsers. Always start with unprefixed, and only add prefixes if necessary to support it.

• Since your header and footer aren't meant to flex, they should both have flex: none; set on them. Right now you have a similar behavior due to some overlapping effects, but you shouldn't rely on that unless you want to accidentally confuse yourself later. (Default is flex:0 1 auto, so they start at their auto height and can shrink but not grow, but they're also overflow:visible by default, which triggers their default min-height:auto to prevent them from shrinking at all. If you ever set an overflow on them, the behavior of min-height:auto changes (switching to zero rather than min-content) and they'll suddenly get squished by the extra-tall <article> element.)

• You can simplify the <article> flex too - just set flex: 1; and you'll be good to go. Try to stick with the common values in https://drafts.csswg.org/css-flexbox/#flex-common unless you have a good reason to do something more complicated - they're easier to read and cover most of the behaviors you'll want to invoke.

The current spec says this regarding flex: 1 1 auto:

Sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are either flex: auto, flex: initial, or flex: none, any positive free space after the items have been sized will be distributed evenly to the items with flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

It sounds to me like if you say an element is 100px tall, it is treated more like a "suggested" size, not an absolute. Because it is allowed to shrink and grow, it takes up as much space as its allowed to. That's why adding this line to your "main" element works: height: 0 (or any other smallish number).