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

by

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/

More Related Contents:

  1. Why don’t flex items shrink past content size?
  2. Targeting flex items on the last or specific row
  3. Can’t scroll to top of flex item that is overflowing container
  4. Fill the remaining height or width in a flex container
  5. How to vertically align text inside a flexbox?
  6. Equal height rows in a flex container
  7. Equal height children of flex items
  8. flex-grow not sizing flex items as expected
  9. How to specify line breaks in a multi-line flexbox layout?
  10. How to Right-align flex item?
  11. How to remove the space between inline/inline-block elements?
  12. How to add 1px margin to a flex item that is flex: 0 0 25%?
  13. Why isn’t object-fit working in flexbox?
  14. Keep the middle item centered when side items have different widths
  15. How can I make my flexbox layout take 100% vertical space?
  16. text-overflow is not working when using display:flex
  17. Is there a way to remove a div but keep its elements?
  18. Flexbox alternative for IE9
  19. Prevent flex items from stretching
  20. Flex items not respecting margins and box-sizing: border-box
  21. CSS grid – maximum number of columns without media queries
  22. Make flex items overlap
  23. 5 items per row, auto-resize items in flexbox
  24. Aligning elements left and center with flexbox
  25. Flexbox, z-index & position: static: Why isn’t it working?
  26. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  27. Why are some of my CSS rules not working?
  28. Different implementation of Flexbox in Firefox and Chrome
  29. Make flex container take width of content, not width 100%
  30. justify-content: space-between failing to align elements as expected

Leave a Comment