Streaming live at 10am (PST)

[RESOLVED] Flex Child Settings overriding Parent Settings - Greyed Out


#1

Hey there people,

2nd question…

I’ve noticed on some of my Flexbox settings (namely Height, Width etc) are greyed out and when I hover the mouse over the setting value field a ‘Help Hint’ is displayed to the effect:
Please see full image highlighted settings)

What I don’t understand is where the Flex Child Settings are coming from, because in this particular instance the only Child elements in this Div are Paragraph text.

Probably something really simple and/or basic…please enlighten me :tired_face:

Many Thanks
Keiran

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @knk

Does the Hero Wrapper above it have Flex settings?

That would explain it making the Hero Quote Text Wrapper a Flex Child.

An element can be the child of another element, whilst also being a parent of another element, which looks like the case here.

Can you update your preview link for further help - for some reason it’s not opening the project :slightly_smiling_face:


#3

Hey Stu,

Thanks for your reply.

Yes, the Hero Wrapper is set to display: flex, which also has the Height setting greyed out. The parent div Flex Container is also `display: flex, but settings not greyed out.

I’ve been on a Flexbox Frenzy!!

The settings are not affected in the desktop view.

Also, I’ve updated the preview link.

Cheers
Keiran


#4

Hi @knk,

When you set flex item to expand in Webflow it is just a 1 click preset of different properties that are commonly used. Going into the gear icon you will see that a flex basis is set to obtain this behaviour (in this case 0%).

The values are greyed out because they won’t be taken into consideration for the maths behind flexbox.
Therefore the flex basis is the value flexbox is using to know how it should grow/shrink.

According to MDN setting the flex basis to auto means look at my width and height to calculate the basis instead of overriding it.

If you want to have control over them set the flexitem on the gear icon and you can use grow 1, shrink 1 and basis auto, you should then have access to the height value of your flex item.

I hope it helps.

Max


#5

@Maximosaurus

Merci Beaucoup, mon ami Webflow!!
I hope that translates correctly.

You have opened my eyes and broadened my perspective about Flexbox (and the Webflow settings).

Isn’t web design fantastic! The more you learn, the more you realise you don’t know :blush:

Keiran
Nouvelle-Zélande


#6

No worries mate,

Have a look on my answer on the other thread you opened. I pointed you out to a nice link to fully get the power of Webflow.

It would be boring if we were not learning :slight_smile:

I’m glad if I helped you and don’t hesitate to ask here as this community is really reactive and helpful.

Also when an answer solved your issue don’t forget to mark it as solved as it will help others on the forum to find answer to similar questions or as well to focus on unresolved ones.

Cheers