Flexbox and vertical scroll in a full
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.
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 {
-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/
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).
上一篇: CSS FlexBox模型：Flex和Box之间的区别
下一篇: Flexbox和垂直滚动