what decides when these flex items wrap?
Hey, i have two
input elements in a flex container. I've overwritten their user agent fixed width by applying min-width: 0; to them, allowing them to shrink. I've also applied flex-grow: 1; to them so they fill the space equally. The flex container has flex-wrap: wrap; on it however considering that the children have min-width: 0;, theoretically meaning they can shrink to nothing, what causes them to wrap rather than doing that? Thanks in advance.
https://codepen.io/deerCabin/pen/GRbRxjO13 Replies
the wrapping behavior isn't at the smallest size they can get to. Rather, it's when they hit their "ideal" size. So, if you set a
width or flex-basis, it will be when they get to that size. If you don't set either one, it's at it's intrinsic size.
As for what the intrinsic size is, with an input, it's the default size you get when you put one on your page 😄Firefox's dev tools are still the best for understanding how Flexbox works.
Inspecting one of the inputs, you'll see something like this image in the Layout tab. When the Final Size is the same as the Content Size, it'll wrap
Basically,
flex-shrink is a last resort, it will only come into play after wrapping, not before.Ahh I always thought it was when they were at their smallest size, I’ll be sure to check that out on firefox too, that’s quite useful, thank you Kevin
I just have a question if that’s okay. Is the final size the full width of the container or the max width the element can be/take up?
It's the currently calculated size, based on the content size, and then the grow/shrink that's being applied to it
Ohh okay I see, thank you. Is there a way to make it wrap specifically at a certain point? Maybe a min width on the first one?
min-width means it can never be smaller than that though, even if there is a
flex-shrink.
You can declare a width or flex-basis though, and it'll wrap at that size, and still grow/shrinkAh okay, if I set a flex basis or width of 45% let’s say, would they not wrap since it could be 45% of any size container?
Yeah I don't think it would ever wrap then, exactly.
Ah so it would have to be ems rems or px, wouldn't setting a fixed width cause overflow in certain situations? or does the flex grow and shrink prevent that? thank you for your help.
and if the flex container had
justify-content: space-between; on it for example, i gather it would wrap when the two elements touch since it doesn't have a flex-grow? i updated the codepen with that example https://codepen.io/deerCabin/pen/GRbRxjOyeah, with the grow and shrink you shouldn't run into any issues.
yeah 🙂
Awesome, thank you for your help with all this, I appreciate it