flex basis, weird behavior when set to auto and 0
Context: I have 4 flex items inside a flex container, each flex item is allowed to grow and shrink, the flex item 2 has a flex basis of 800px,
Now I have 2 questions...
First: why the other flex items are growing and not shrinking despite of the fact that the flex item 2 isn't 800px width like it should be, I mean there will be a space for it to grow if the other flex items tried to shrink or at least not to grow
Second: when I set the flex basis for the other flex items to 0 the flex item 2 takes a little bit more space than if I set the flex basis for the other flex items to auto see the photos
6 Replies
Can you share your code in a codepen?
I'll explain exactly what's happening, but are you sure the 800px one is smaller than 800px?
Well actually it wasn't but still if I make it like 1400px the same behavior happens, and for the sake of screen size I will share a video showing it
Hope this helps 😄
It really does help, the thing you pointed out and I was messing is the intrinsic size of the flex item based on which the ratio of flex growing and shrinking is calculated!
Thank you so much for taking the time to answer my questions and even making a whole video about it 🙌 🙌 That really cleared things up for me
glad it helped 🙂 - definitely easier to explain this with a video than writing it out, at least for me, lol