Strange Flexbox Behaviour

Design help General
1

Hey everyone,

I’m experiencing some strange behaviour with Flexbox.

In the photo below, I’ve displayed two versions of the same site. In both versions there is a nav bar, and a nav container. The navbar also has a max-width of 1440px in both versions. Here are the differences between the two versions:

In version 1, I set the nav container to ‘flexbox’, and for some reason the nav bar shrinks down, even though the max width is set to 1440px

In version 2, I set the nav container to ‘block’ and it does exactly what I want it to do.

Is there an explanation for these different behaviours? Why does setting the container to ‘flex’ shrink the containing element below its max width?

Thanks for the help!

image
image1450×1172 194 KB

Here is my site Read-Only: https://preview.webflow.com/preview/loosely-sealed?utm_medium=preview_link&utm_source=dashboard&utm_content=loosely-sealed&preview=a17d782c0977f525ca044900a11e80ec&mode=preview

2

When you set the nav-container to display flex, the immediate child (nav) becomes a flex item, causing it to shrink. If nav-container’s display type is set to block, nav will remain a block level element and span the full width.

In this case, I think you would want nav-container to remain ‘block.’

3

The standard webflow navbar has issues with flexbox.

maybe this helps