flex-grow not working in column layout

by

Everything in your code is working fine.

The only issue is that your flex container has no specified height. Therefore, the height resolves to auto, meaning the height of the content.

The flex-grow property distributes free space in the container. With no free space in your container, flex-grow has nothing to do.

Try this adjustment to your CSS:

.analysis {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

This tells the flex container to be the height of the viewport. Now the height of the container is taller than the height of the content, and you will notice flex-grow doing its work.

Revised Fiddle

Learn more about the height: auto default on most elements.

More Related Contents:

  1. Flex / Grid layouts not working on button or fieldset elements
  2. How do I keep two side-by-side div elements the same height?
  3. How to disable equal height columns in Flexbox?
  4. Proper use of flex properties when nesting flex containers
  5. Center and bottom-align flex items
  6. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  7. Remove space (gaps) between multiple lines of flex items when they wrap
  8. Equal height columns with CSS
  9. Make flex items take content width, not width of parent container
  10. Heights rendering differently in Chrome and Firefox [duplicate]
  11. Using flex order property to re-arrange items for desktop and mobile views
  12. Properly sizing and aligning the flex item(s) on the last row
  13. Flexbox fill available space vertically
  14. Flexbox not giving equal width to elements
  15. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  16. Equal space between flex items
  17. How can I make a display:flex container expand horizontally with its wrapped contents?
  18. Why does percentage padding break my flex item?
  19. Why does flexbox stretch my image rather than retaining aspect ratio?
  20. How to center-align one flex item and right-align another using Flexbox [duplicate]
  21. How to make a sticky footer using flexbox in IE11?
  22. Why is there vertical scroll on the main container?
  23. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  24. How can I create a row-based masonry layout using CSS?
  25. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  26. How do I make flex box work in safari?
  27. Zebra striping a flexbox table with wrapping items
  28. Element with “display: inline-flex” has a strange top margin
  29. Aligning to the bottom in flexbox
  30. Make flex container take width of content, not width 100%

Leave a Comment