I'm struggling with utilizing flexbox properly and would like some clarification on how nesting parent and child elements functions.
I understand that the child elements inherit the parent's flex properties, but I'm unsure if this inheritance extends to further descendants (such as 'grandchildren'). What is the correct approach to using flexbox in these situations?
In simpler terms, do I need to add display: flex to the child element as well, for its own children? And if so, will this override the flex properties of the parent element?
.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>