The Size block sets width and height (and, for flex children, grow/shrink/basis). Use keywords like Hug (max-content) and Fill (stretch), plus optional min/max and a ratio lock.
Where: Right sidebar → Layout & Transform → Size — Select an element and open Size
Key ideas
- Units & keywords: px / % / rem / vh / vw, plus Hug (max-content), Fill (stretch), and Auto.
- Flex sizing: Grow / Shrink / Basis appear when the parent is a flex (Stack) container.
- Ratio lock: Lock width:height so editing one computes the other (hold Shift to override).
Steps
- Open Layout & Transform → Size.
- Set Width and Height (or pick Hug / Fill).
- Add min/max or aspect-ratio with “+” if needed.
- Toggle the ratio lock to keep proportions.
Sizing values and parent context
- Width and height support unit values plus Hug (max-content), Fill (stretch), and Auto.
- Grow, Shrink, and Basis appear when the parent is a flex/Stack container; they do not behave like fixed width/height.
- Min/max constraints and aspect ratio are optional properties. The ratio lock keeps proportions while editing unless Shift temporarily overrides it.
Choose the right sizing behavior
- Use Hug when content should determine a dimension, Fill when it should consume available space, and a fixed/unit size when a stable frame is required.
- Check the parent display mode when a control is unavailable or the element does not grow as expected.
- Test long text and narrow breakpoints after setting min/max or ratio constraints.
Limitations and important notes
- Hug/Fill and flex sizing depend on parent layout; changing the parent can alter the result without changing the child’s saved dimensions.