The difference between flex:1 and flex-grow:1

by

flex

The flex property is a shorthand for setting:

  • flex-grow
  • flex-shrink
  • flex-basis

The flex: 1 rule is supposed to compute to this:

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

These values are defined in the spec. See section 7.1.1. Basic Values of flex

I say “supposed to compute” because, in IE11 and possibly other browsers, a unit of measure, such as px or %, is appended to the 0 value in flex-basis. This can make a difference (example).

flex-grow

The flex-grow property (which distributes free space in the container among flex items), when declared by itself, leaves flex-shrink and flex-basis at their initial values.

So when you set flex-grow: 1, the browser renders this:

The difference between flex: 1 and flex-grow: 1

Ultimately, the difference between flex: 1 and flex-grow: 1 is that the former sets flex-basis: 0, and the latter keeps the default flex-basis: auto.

For a complete explanation of the difference between flex-basis: 0 and flex-basis: auto see this post:

Your code example

The reason you’re seeing a difference in your code is that flex-basis controls height in a column-direction container.

In Chrome, with flex-basis: auto, the height of the element is 450px (500px parent – 50px header). In other words, flex-grow is free to distribute the free space.

With flex-basis: 0, the height of the element is 0, and flex-grow has no free space to distribute.

The height: 100% on the child of the flex item is simply ignored because it isn’t being applied properly, as explained in these posts:

In reading the posts above you’ll also understand why your code renders differently in Firefox, Safari, Edge and IE.

More Related Contents:

  1. Make a div span two rows in a grid
  2. Bootstrap align navbar items to the right
  3. Aligning grid items across the entire row/column (like flex items can)
  4. What’s the difference between align-content and align-items?
  5. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  6. How can I make Flexbox children 100% height of their parent?
  7. Bootstrap 4 navbar with 2 rows
  8. What’s the difference between display:inline-flex and display:flex?
  9. How does flex-shrink factor in padding and border-box?
  10. Margin collapsing in flexbox
  11. Scrolling a flexbox with overflowing content
  12. A grid layout with responsive squares
  13. Bootstrap 4 masonry layout utilizing flexbox grid
  14. How to change flexbox wrap?
  15. Create a Masonry grid with flexbox (or other CSS)
  16. css grid of squares with flexbox
  17. CSS flexbox not working in IE10
  18. Set flexbox children to have different heights to use up available space
  19. Height 100% on flexbox column child [duplicate]
  20. Prevent flex item from exceeding parent height and make scroll bar work
  21. text-overflow ellipsis on flex child not working [duplicate]
  22. React native text going off my screen, refusing to wrap. What to do?
  23. How can I change the order of Bootstrap columns?
  24. How to use safe center with flexbox?
  25. How do I set distance between flexbox items?
  26. Difference between flex-end and end? [duplicate]
  27. How to control number of items per row using media queries in Flexbox?
  28. Vertically center items with flexbox
  29. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  30. Horizontal masonry layout with flexbox CSS only [duplicate]

Leave a Comment