html - 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. 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%;
  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.