CoffeePeddlerIntern CoffeePeddlerIntern - 1 month ago 11
CSS Question

Proper use of flex properties when nesting flex containers

I am having problems using flexbox properly and wanted to get some clarification on how nesting parent and child elements works.

I know that the child inherits the parent's flex. But does that get overwritten if you need to flex a child for its children (baby)? What is the proper usage of flexbox?

When do I have to apply

display: flex
to the child for its child's (baby's) sake, or will that overwrite the child's parent flex?



parent-container {
display: flex;
flex: 1 0 100%;
}
.child-container {
flex: 1 1 50%
}
.baby-of-child-container {
flex: 1 1 50%;
}

<div class='parent-container'>
<div class 'child-container'>
<div class='baby-of-child-container'></div>
<div class='baby-of-child-container'></div>
</div>
<div class 'child-container'>
<div class='baby-of-child-container'></div>
<div class='baby-of-child-container'></div>
</div>
</div>




Answer

The scope of a flex formatting context is limited to a parent/child relationship.

This means that a flex container is always the parent and a flex item is always the child. Flex properties work only within this relationship.

Descendants of a flex container beyond the children are not part of flex layout and will not accept flex properties. Essentially, elements that are descendants of flex items do not inherit flex properties.

You will always need to apply display: flex or display: inline-flex to a parent in order to apply flex properties to the child.

There are certain flex properties that apply only to flex containers (e.g., justify-content, flex-wrap and flex-direction), and there are certain flex properties that apply only to flex items (e.g., align-self, flex-grow and flex).

However, flex items can also be flex containers. In such cases the element can accept all flex properties. Being that each property performs a different function, there is no internal conflict and nothing needs to be overridden.