Proper use of flex properties when nesting flex containers

Question

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 properties, but does that get reverted for any further descendants (e.g. 'grandchildren')? What is the proper usage of flexbox for that?

In other words, do I have to apply display: flex to the child, too, for the child's children? Will that overwrite the first child's parent's flex properties?

.parent-container {   display: flex;   flex: 1 0 100%;   background-color:yellow; } .child-container {   flex: 1 1 50%   background-color: blue; } .baby-of-child-container {   flex: 1 1 50%;   background-color: green; }

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

Answer 1

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.

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.