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-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
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 defaults to
visible on all html elements.