Explanation for setting “flex:1” or “flex-grow:1” on all ancestor nodes in nested flex layouts given that flex properties are not hierarchical?

Question

I've read several times that to get flex-grow to work as expected you often need to set flex-grow:1 (or flex:1) on the element's parent, its parent, etc, all the way up.

This gave me the impression while learning flexbox that it had a hierarchical nature of some kind.

But I've just learned that all of the flow-* properties are not hierarchical and apply only directly to a container and its immediate children.

I think many people besides me will benefit from a clear explanation of how flex properties, especially flex-grow interact with the element/component hierarchy and what you're actually doing when setting the property on the ancestor nodes to get your layout to work.

This may be more of a problem in React Native where flex is the primary method of layout and layout may well involve rather deeper nesting than is common on the web.

A related factor, which added to the confusion in my case, was how manually propagating flex-grow through the ancestors this way worked with flex-direction, which especially in React Native, will often alternate between row and column.

Answer 1

...for setting “flex:1” or “flex-grow:1” on all ancestor nodes in nested flex layouts...

To say “on all ancestor nodes” is inaccurate, it should be on all descendant nodes, which, in terms of parent/child, mean, flex-grow is set on the child, not parent, but since an element can be both a parent and a child, general callled nested flex elements, a parent can have flex-grow if it also is a child.

The flex formatting context has a well explained answer here:

• Proper use of flex properties when nesting flex containers

---

...what you're actually doing when setting the property on the ancestor nodes to get your layout to work.

Again, to say “when setting the property on the ancestor nodes” is inaccurate, you set the property on the descendant nodes

---

Explanation for setting “flex:1” or “flex-grow:1” ... in nested flex layouts

First, setting flex: 1 is equal to flex: 1 1 0, and flex-grow: 1 is equal to flex: 1 1 auto, and this is based on that flex defaults to flex: 0 1 auto, well explained here:

• The difference between flex:1 and flex-grow:1

---

Now, flex-grow defaults to 0, which means it won't be bigger than its content, similar to how an inline-block element work, and will as such render like this:

body { margin: 0; }

.flex-container {
  display: flex;
  height: 100vh; 
}

.flex-parent {
  display: flex;
}
.row-direction {
  flex-direction: row;
}
.column-direction {
  flex-direction: column;
}

.flex-child {
  margin: 2px;
  border: 1px dashed gray;
}

<div class="flex-container column-direction">

  <div class="flex-child flex-parent row-direction">

    <div class="flex-child">
      First row, first item
    </div>
    <div class="flex-child">
      First row, second item
    </div>
    <div class="flex-child">
      First row, third item
    </div>
    
  </div>

  <div class="flex-child flex-parent row-direction">

    <div class="flex-child">
      Second row, first item
    </div>
    <div class="flex-child">
      Second row, second item
    </div>
    
  </div>

  <div class="flex-child flex-parent row-direction">

    <div class="flex-child">
      Third row, first item
    </div>
    
  </div>

</div>

So what flex-grow: 1 does, is to make the element grow and fill the available space within its parent, like this, and as you can see, here alternate between row and column as React often does, it works perfect:

body { margin: 0; }

.flex-container {
  display: flex;
  height: 100vh; 
}

.flex-parent {
  display: flex;
}
.row-direction {
  flex-direction: row;
}
.column-direction {
  flex-direction: column;
}

.flex-child {
  flex-grow: 1;
  margin: 2px;
  border: 1px dashed gray;
}

<div class="flex-container column-direction">

  <div class="flex-child flex-parent row-direction">

    <div class="flex-child">
      First row, first item
    </div>
    <div class="flex-child">
      First row, second item
    </div>
    <div class="flex-child">
      First row, third item
    </div>
    
  </div>

  <div class="flex-child flex-parent row-direction">

    <div class="flex-child">
      Second row, first item
    </div>
    <div class="flex-child">
      Second row, second item
    </div>
    
  </div>

  <div class="flex-child flex-parent row-direction">

    <div class="flex-child">
      Third row, first item
    </div>
    
  </div>

</div>