Is there a work around to turning flex items to containers?
I notice when adding the flex attribute to a flex item, that flex item over flows its container. Is there a way to contain that flex item? I guess it would be considered a nested flex-container?
Flex-box is a complex parent-child positioning relation with multiple attributes on both parent and children. Please note that the flex attribute on an item is a shorthand property for flex-grow, flex-shrink and flex-basis, in that order.
While it might seem like it affects overflowing in some cases, it actually does not. That is strictly controlled by the overflow property. You could easily test this by setting a thin border on parents and/or children (border: 1px solid red;) while playing with flex and overflow.
You will notice flex does not change or control overflow. It might change the shape and position, which might result in a child overflowing its parent or other siblings, but it doesn't change or control the overflow property.
overflow defaults to visible on all html elements.