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.