Why are some Flexbox settings like Height and Width greyed out in Webflow?

When using Flexbox layout in Webflow, certain style settings like Width or Height may appear greyed out due to how Flexbox manages spacing and alignment.

1. Flex Children Inherit Sizing From the Parent or Flex Rules

• If an element is inside a Flex container, its dimensions may be automatically determined by Flex-grow, Flex-shrink, and Flex-basis.
• When Flex item sizing is controlled this way, Webflow disables or greys out manual Width or Height to avoid conflicts.
• For example, setting "Align: Stretch" under cross-axis alignment causes Webflow to auto-determine height, greying out the height field.

2. Stretch Alignment Overrides Custom Height

• If the Flex container is set to align children using Align: Stretch, then children will expand to fill the container's height or width.
• In this case, the Height input for the child item is greyed out, because stretch alignment takes precedence.

3. Auto Width or Height via "Shrink" or "Grow"

• If Flex-shrink or Flex-grow is active and set to dynamically size the item, Webflow disables fixed Width or Height fields.
• You can override this by setting Flex-grow: 0, Flex-shrink: 0, and adjusting Flex-basis or switching to custom Width/Height.

4. Hidden Fields for Specific Display Settings

• Some Flexbox-related styles only apply when the element has a certain Display setting. For instance, if your element is not a Flex child, some Flex-related controls are inactive.
• Confirm that the parent is set to Flexbox and that the element is a direct child.

5. Workaround: Use “None” in Alignment to Regain Manual Control

• To re-enable the Height or Width field, change Align Self or Align Items from Stretch to None or another setting like Start or Center in the Flex layout.
• This lets you manually define the Width and Height again.

Summary

Flexbox settings like Height and Width may be greyed out in Webflow because the Flex layout automatically controls sizing through alignment or grow/shrink rules. Adjusting Align Items, Align Self, or disabling Flex auto-sizing will restore manual control.