Flexbox child grow - troubleshooting

Hi Amazing People!

I am trying to solve an issue with a flexbox child element, and I am not getting very far! I would really appreciate some help if possible :blush:

My sections have a height of 100vh. I would like to center my elements vertically.

When I apply display:flexbox | align:center | justify:center to the parent section (“section_work-3”), some children (“work_content”) do not grow to the full width size of the container. I can get it to grow if I apply a minimum width. However, I feel there is a better way to do it - preferably to have it fit the width of the “container-large”.

The elements stretch full width when the parent is set to display:block, but not flexbox. I am happy for it to be a block element if I can get the elements to align and justify center.

In my read only link the sections I am talking about are:

  • section_work-2 (display:block)
  • section_work-3 (display:flexbox)

I know there is a simple explanation that I am missing! Any help would be greatly appreciated!



Here is my site Read-Only: **[1]: Webflow - Easy Web Australia 2023)

Hi @Cameron3,

Looking at the document structure of your sections, you need to apply ‘sizing | grow’ to the 1st child element (in this case ‘padding-global’). As you have set 100% width on the next 2 child elements, they will then respect the width that ‘padding-global’ will expand to.

Hope that makes sense.

Let me know if that solves it for you.


Hi Keiran,

Thank you very much!

It solved the problem.

You’re the best. Very grateful for your assistance.