Make flex-grow expand items based on their original size

by

Short Answer

Switch from flex: 1 to flex: auto.

Explanation

The flex-grow property factors in two key pieces of data:

  1. The free space in the row / column where it is being used.
  2. The value of the flex-basis property.

Distribution of Free Space

The flex-grow property distributes free space in the container among flex items in the same line.

If there is no free space, flex-grow has no effect.

If there is negative free space (i.e., the total length of flex items is greater than the length of the container), then flex-grow has no effect and flex-shrink comes into play.

The flex-basis factor

When flex-basis is 0, flex-grow ignores the size of the content in flex items and treats all space on the line as free space.

This is absolute sizing. All space on the line is distributed.

When flex-basis is auto, the size of the content in flex items is first deducted to determine the free space in each item. flex-grow then distributes the free space among items (based on each item’s flex-grow value).

This is relative sizing. Only extra space on the line is distributed.

Here’s an illustration from the spec:

enter image description here

Examples:

  • flex: 1 (absolute sizing)

This shorthand rule breaks down to: flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

Applied to all flex items, this will make them equal length, regardless of content. (Note that in some cases an override of default minimum sizing will be necessary for this effect to occur.)

  • flex-grow: 1 (relative sizing)

This rule by itself will factor in both content size and available space, because the default value for flex-basis is auto.

  • flex: auto (relative sizing)

This shorthand factors in both content size and available space because it breaks down to:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

More variations here: 7.1.1. Basic Values of flex

additional keywords for search: difference between flex-basis auto 0 flex 1 auto

More Related Contents:

  1. Make a div span two rows in a grid
  2. Fill remaining vertical space with CSS using display:flex
  3. How does flex-wrap work with align-self, align-items and align-content?
  4. Flex-box: Align last row to grid
  5. Text in a flex container doesn’t wrap in IE11
  6. Better way to set distance between flexbox items
  7. What’s the difference between align-content and align-items?
  8. Align 3 unequal blocks left, center and right
  9. How does flex-shrink factor in padding and border-box?
  10. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  11. How can I align one item right with flexbox?
  12. What does flex: 1 mean?
  13. My position: sticky element isn’t sticky when using flexbox
  14. Margin collapsing in flexbox
  15. Every item to have the same width as the widest element [duplicate]
  16. How can I make a div span multiple rows and columns in a grid?
  17. Flexible box model – display : flex, box, flexbox? [duplicate]
  18. firefox overflow-y not working with nested flexbox
  19. Prevent flex item from exceeding parent height and make scroll bar work
  20. Are flex items block level element?
  21. Bootstrap change order of columns
  22. CSS3 Flexbox: display: box vs. flexbox vs. flex
  23. Flex auto margin not working in IE10/11
  24. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  25. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  26. The difference between flex:1 and flex-grow:1
  27. How to control number of items per row using media queries in Flexbox?
  28. Vertically center items with flexbox
  29. How to stretch children to fill cross-axis?
  30. Issue when centering vertically with flexbox when heights are unknown

Leave a Comment