this is more of a question where I am looking for verification that I have this concept down. I am currently trying to up my Flexbox game because it can be quite frustrating when flexbox causes unexpected behavior in child elements.
Basically my theory is this (after reading some of the docs from W3C here https://www.w3.org/TR/css-flexbox-1/#flexibility ). I’m going to try to explain in a plain English conversational tone, so apologies in advanced if my explanation is a bit raw sounding:
A Law of Flexbox:
*Ahem*… Lets say I have a flex parent with a bunch of children. The only property that I assign to the parent is display: flex; (no flex-wrap: wrap;). Now, once I start adding children to this flex container, I can, by manipulating the children’s flex-shrink and flex-basis properties, tell the flex items in the container “Hey children of this parent container, at all darn costs, try to shrink yourselves to be as small as humanly possible so you won’t overflow your parent container….”
This is great and all, but at the end of the day, if there are just so many darn items in the container, at a certain point THEY WILL OVERFLOW and there is nothing you can do about it except add flex-wrap: wrap; to the parent.
And thats the law...
Does that seem right in terms of the children overflowing the container? Are there any other concepts to add to that? (ambiguous question sorry) Would there be any other solutions for avoiding overflow using only display: flex; on the parent and manipulating the flex properties of the children?
The docs confuse me when they state in section 7 of the W3C:
“A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container, or shrinks them (proportional to their flex shrink factor) to prevent overflow.”
(I thought I was starting to undertand flexbox on a deeper level, then I spent two hours trying to do a simple task in it, so I'm deep diving into the docs. Wish me luck!)
Thanks in advance everyone!
