Div-Block not taking full width when Parent Element is Display = Flexbox

[Douglas_Fllrtn]

Hey guys,

So I am struggling to make a Div Block containing content take the “full width” of its parent element (a section with max width 1100px). When the Section’s Layout Display is “Block”, then it doesn’t cause issues - this is how I have set up all other sections and content on the page and its fine.

But for a header section, I need to use flexbox, in order to center the content Vertically. Any thoughts?

Here is what I am facing when section layout display = flexbox:

https://preview.webflow.com/preview/werden-be24ed?utm_medium=preview_link&utm_source=designer&utm_content=werden-be24ed&preview=d97b134af34455ebc4bc49ad41b6912b&pageId=5e8b0b04eaa7852ca1d76218&itemId=5e8b0cc2869991a4c7ab8eb1&mode=preview

Many thanks in advance!!

[vincent (Webflow Expert)]

An element just inside a flex element is a flex child and it has special properties that you can play with.

[Douglas_Fllrtn]

Thanks for the fast reply. So I have now done that to the container (child of the section), and also set it to 100% width. However, I fear that because I was/am using containers with max widths, rather than fixed widths, (for responsive reasons), that this “work-around” will kill that… am I right in thinking this?

Thanks again @vincent

[vincent (Webflow Expert)]

If you have any doubt, replace containers by divs and set your own rules for their sizing. Let me know how it goes and if you end up with exactly what you wanted

[Douglas_Fllrtn]

Sorry should have mentioned: My “Containers” are divs that I customized.
These are the settings I am now using after your instructions:

It is working, I am just surprised that now that width is 100%, that it is still respecting the Max width of 1100px. I would have thought that it would “overwrite” that rule. But maybe I don’t fully understand this as much as I thought

[vincent (Webflow Expert)]

No that’s easy. It reaches for 100%, but there’s a maximum So it stops at the maximum. There is no overwrite, those rules are different and they work together.

Mastering min and max width will allow you to craft the most advanced simple and solid layouts. I swear

Edit : don’t declare rules that stay at 0 or None. Alt click on the blue label to erase them. Only put 0 in that field if there was a value in it when the label was orange.

[Douglas_Fllrtn]

Ah makes sense! They work together, of course thanks Vincent!
Also thanks for the little alt-click hack; will be used from now on.

Have a great day!

[vincent (Webflow Expert)]

Great that it works! The alt-click is a real time saver that’s true!