Why are some Flexbox settings like Height and Width greyed out in Webflow?
TL;DR
- Flex direction determines whether width or height is auto-controlled; switch directions or use manual sizing units (e.g. PX) to regain control.
- Greyed-out size settings can result from inherited styles, Auto size mode, display type restrictions, or active flex-grow/shrink settings.
Greyed-out height and width settings in Webflow’s Flexbox layout typically indicate that those styles are controlled by the Flexbox model or inherited from other CSS rules.
1. Flex Direction Affects Available Settings
- When using Flexbox, the main and cross axis determine how child elements behave.
- If you set Flex Direction: Row, the horizontal axis is the "main" axis. In this case:
- Width is controlled by content or grow/shrink; height can still be explicitly set.
- If you set Flex Direction: Column, the vertical axis becomes the main axis:
- Height is controlled by content or grow/shrink; width can be manually set.
2. Size is Inherited from Parent Settings
- Flex children often receive width/height automatically from their content or parent’s Flex settings.
- When flex-grow, flex-shrink, or flex-basis are applied, Webflow may disable manual height or width input to avoid conflicting styles.
3. CSS Display Property Restrictions
- Certain display types (e.g., inline, inline-flex) restrict height or width from being manually set.
- Check if the element (or its parent) has a specific display mode that overrides standard sizing.
4. Element is Set to Auto
- If height or width are set to Auto, Webflow disables manual input to reflect that the size is dependent on content or parent layout.
- To enable manual input, set the sizing to PX, %, or VW/VH instead of Auto.
5. Class or Style Conflict
- Another class or style applied to the element via combo class, interactions, or inherited styles may lock certain properties.
- Use Webflow's style panel selector view to identify if another rule is overriding your controls.
Summary
Height or width settings in Flexbox may be greyed out due to the Flex Direction, Auto sizing, inherited layout behavior, or display restrictions. Adjust the Flex settings or sizing units to regain control as needed.
