Flexbox child grow - troubleshooting

Design help General
1

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!

Thanks,

Cam

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

Screenshot 2023-03-07 at 3.14.05 pm
Screenshot 2023-03-07 at 3.14.05 pm1689×1275 82.1 KB

Screenshot 2023-03-07 at 3.14.18 pm
Screenshot 2023-03-07 at 3.14.18 pm1716×1859 105 KB

2

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.

Keiran

1
11867×1458 239 KB

3

Hi Keiran,

Thank you very much!

It solved the problem.

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

Cameron