Why are some Flexbox settings like Height and Width greyed out in Webflow?
TL;DR
- Flexbox greyed-out Height/Width settings are usually due to auto-sizing from settings like Align: Stretch or Flex Grow/Shrink.
- Regain control by changing Align options, adjusting flex settings, using Min/Max values, or temporarily switching display types.
When using Flexbox in Webflow, you may notice that some style settings—especially Height, Width, or Align options—are greyed out. This typically happens due to how Flexbox layout logic interacts with child elements.
1. Parent-Child Relationship in Flexbox
- If a parent element is set to display: flex, its child elements adapt to the flex container rules.
- In Flexbox, the Size of flex children (Height/Width) can often be automatically determined, which limits direct control via the Style panel.
2. Why Height or Width Are Greyed Out
- Auto-Sizing by Flex Rules: Webflow disables (greys out) manual size inputs because the size is being determined dynamically by Flex behavior (e.g.,
align-stretch,justify-content, orflex-growsettings). - Align: Stretch: If a child element is set to Align: Stretch, its Cross-axis size (e.g., Height in a row direction) is automatically managed, making manual Height/Width inputs unavailable.
- Default Auto Values: Some inputs are greyed out to indicate the property is set to auto or inherited from the parent layout behavior.
3. How to Regain Control
- Change the "Align" Option: Instead of "Stretch", use Start, Center, or End to allow manual Height settings.
- Adjust Flex Settings: Switch off Grow or Shrink if they’re forcing a calculated size.
- Use Fixed or Min/Max Values: Apply Min-Height, Max-Width, etc., as these are usually still editable and can override flex sizing behavior.
- Switch Display Setting: In some cases, switching from
display: flextoblockorinline-block(temporarily) allows you to see and adjust otherwise greyed-out properties.
4. Other Possible Reasons
- Symbol or CMS Item Locking: If the element is part of a Component (Symbol) or bound to a CMS field, some styling options can be limited.
- Inherited Display Style: If an element's parent has restrictive settings (e.g., overflow, fixed display, etc.), it can indirectly lock settings like size.
Summary
When Height or Width are greyed out in Webflow Flexbox, it's usually due to auto-sizing rules from flex alignment settings, especially Align: Stretch. Modify those Flex properties or use Min/Max constraints to regain styling control.