How can I combine flexbox and vertical scroll in a full-height app

Question

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    x000D   x000D  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    x000D   lt section id  container   gt  x000D       lt header id  header   gt This is a header lt  header gt  x000D       lt article id  content   gt  x000D          This is the content that x000D           lt br   gt  x000D          With a lot of lines  x000D           lt br   gt  x000D          With a lot of lines  x000D           lt br   gt  x000D          This is the content that x000D           lt br   gt  x000D          With a lot of lines  x000D           lt br   gt  x000D           lt br   gt  x000D          This is the content that x000D           lt br   gt  x000D          With a lot of lines  x000D           lt br   gt  x000D           lt br   gt  x000D          This is the content that x000D           lt br   gt  x000D          With a lot of lines  x000D           lt br   gt  x000D       lt  article gt  x000D       lt footer id  footer   gt This is a footer lt  footer gt  x000D   lt  section gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

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

User · Answer

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  lt article gt  element   You can simplify the  lt article gt  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

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

Examples related to html

Examples related to css

Examples related to flexbox