Difference between flex-grow and flex-shrink

Question

What is the difference between this two styles:

.style1 {
  flex-shrink: 0;
}

.style2 {
  flex-grow: 1;
}

If I'm setting the flex-grow to 1, it means that the element can't shrink, and vice-versa, right?

Thank you.

Also, the question doesn't need to be the same, it is if an answer can answer both questions. — Asons, Nov 05 '17 at 18:13
Simply put, `flex-grow` tells if to grow or not, where `flex-grow: 0` mean don't grow, and `flex-shrink` tells if to shrink or not, where `flex-shrink: 0` mean don't shrink. — Asons, Nov 05 '17 at 18:29

score -1 · Answer 1 · answered Nov 05 '17 at 18:11

setting ‘flex-grow: 1’ is default value which will allow an element to increase width evenly.

Setting ‘flex-shrink: 0 ‘ means that element width can be reduced if other siblings have greater width.

1 Answers1