José Cabo José Cabo - 3 months ago 33
CSS Question

Flexbox and vertical scroll in a full-height app using NEWER flexbox api

I want to use a full-height app using flexbox. I found what I want using old flexbox (display: box; and other things) in this link: CSS3 Flexbox full-height app and overflow

This is a correct solution for 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 but "hacking" flexbox 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 workarround than a solution.

I have prepared a jsfiddle with a base example: http://jsfiddle.net/ch7n6/

#container {
display: -webkit-flex;
-webkit-flex-direction: column;
height: 100%;
}
#container article {
-webkit-flex: 1 1 auto;
overflow-y: scroll;
}


It is a "full-height html web" and the footer are at the bottom because of the flexbox of the content element. I suggest you move the bar between css code and result to simulate different height.

Answer

Thanks to http://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 {
    -webkit-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 {
    -webkit-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 {
    -webkit-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 {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

The final code: http://jsfiddle.net/ch7n6/867/